svelte-progressbar

• A multi-series SVG progress bar component for Svelte 3, supporting linear, radial (circular), semicircular, and custom-shaped progress bars with full animation support.
• Purpose: Provides flexible and customizable progress visualization with various styles and configurations.
• Target Audience: Developers using Svelte who need animated, customizable progress bars for dashboards, UI elements, or data visualization.

Key Features:

• Multiple Styles:
  • Linear: Standard (with inverted text color) or thin (external values).
  • Radial: Circular progress bars with adjustable thickness.
  • Semicircular: Half-circle progress visualization.
  • Custom: Define custom shapes using SVG paths.
• Multi-Series Support: Display multiple progress values stacked or side-by-side.
• Reactive Properties: The series prop updates dynamically, allowing real-time progress changes.
• Customization:
  • Adjust colors, labels, thresholds, alignment, and fill direction.
  • Add background bars or inner fills for radial/semicircular styles.
  • Embed subcomponents (e.g., buttons, HTML fragments) within radial bars.
• Framework Support: Primarily for Svelte, but can be used with vanilla JS via bundled scripts.
• Lightweight: No dependencies, ~35kb minified (11kb gzipped).

Examples:

• Linear, radial, semicircular, and custom progress bars with single or multiple series.
• Dynamic updates via reactive props or methods (updateSeries, updatePerc).
• Threshold-based color changes (e.g., red below 50%, green above).

Documentation & Demos:

• Working examples showcase all styles and configurations.