Svelte Progressbar

Overview

The Svelte Progressbar is a multi-series SVG progress bar component made with Svelte 3. It provides the ability to render the progress bar as linear, radial, semicircular, or custom-shaped. The component supports animated progression bars and values. It has no dependencies and is lightweight, with a minified size of 35kb (11kb gzipped).

Features

• Multiple series: Supports single series progress bars with a number indicating the progression percentage or a JSON object with "perc" and "color" properties.
• Value label: Allows the customization of the label that is shown as the progress value with support for markers to substitute with corresponding series values.
• Style customization: Provides different styles for the progress bar, including standard, thin, radial, semicircle, and custom.
• Width and height customization: Allows the specification of the width and height of the component, with the ability to occupy the full width of its parent by default.
• Thickness control: Only applicable to radial progress bars, enables the adjustment of the bar's thickness using a unitless number from 0 to 50.
• Font size customization: Controls the size of the font for the progression value with a percentage value.
• Background bar: Offers the option to add a background bar to the value bar.
• Color customization: Provides options to specify the colors of the background bar, inner circle (for radial and semicircle bars), label, and inverted label.