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.

Installation

To use the Svelte Progressbar, follow these steps:

1. Clone or download the repository.
2. Run the following command to build the Svelte files and transpile TypeScript into the dist/ directory:
   npm run build
3. Alternatively, you can create minified index.js and index.mjs files in the bundle/ directory by running the command:
   npm run bundle
4. Include the index.js bundle in your HTML file.
5. Instantiate the component using the ProgressBar constructor and provide the necessary options. For example:

new ProgressBar({
  series: 20,
  style: 'standard'
});

Summary

The Svelte Progressbar is a versatile component for displaying progress bars in different styles, including linear, radial, semicircular, and custom shapes. With support for multiple series, animated progression, and customizations for width, height, thickness, font size, and colors, it provides flexibility for various use cases. Its lightweight nature and lack of dependencies make it an efficient choice for developers.