Svelte Progress bar

Fork me on GitHub

A multi-series SVG progress bar component made with Svelte 3. It can be rendered both as a linear, radial (circular) o semicircular progressbar. Progression bars and values are fully animated.

If rendered as a linear progressbar there are 2 styles supported:

Examples

A standard progress bar with 1 series


new ProgressBar({
	target: document.getElementById('demo1'),
	props: {
		series: 49,
	}
});
					

A standard progress bar with 2 series


new ProgressBar({
	target: document.getElementById('demo2'),
	props: {
		series: [40, 25]
	}
});
					

A thin progress bar with 2 series


new ProgressBar({
	target: document.getElementById('demo3'),
	props: {
		style: 'thin',
		series: [30, 15]
	}
});
					

A thin progress bar with 1 series and 2% viewbox height


new ProgressBar({
	target: document.getElementById('demo4'),
	props: {
		style: 'thin',
		series: 30,
		height: 2
	}
});
					

A radial progress bar with 2 series and custom font size-full


new ProgressBar({
	target: document.getElementById('demo5'),
	props: {
		style: 'radial',
		series: [30, 15],
		textSize: 75
	}
});
					

A radial progress bar with 1 series, bar thickness of 10 and custom color


new ProgressBar({
	target: document.getElementById('demo6'),
	props: {
		style: 'radial',
		series: [{
			perc: 30,
			color: '#2196f3'
		}],
		thickness: 10
	}
});
					

A radial progress bar with 1 series and color thresholds


new ProgressBar({
	target: document.getElementById('demo7'),
	props: {
		style: 'radial',
		series: 80,
		thickness: 10,
		thresholds: [
			{
				till: 50,
				color: '#800000'
			},
			{
				till: 100,
				color: '#008000'
			},
		]
	}
});
					

A radial non-stacked progress bar with 2 series


new ProgressBar({
	target: document.getElementById('demo8'),
	props: {
		style: 'radial',
		series: [30, 70],
		textSize: 60,
		stackSeries: false,
		thickness: 5,
		margin: 3
	}
});
					

A semicircular non-stacked progress bar with 1 series


new ProgressBar({
	target: document.getElementById('demo9'),
	props: {
		style: 'semicircle',
		series: [{
			perc: 30,
			color: '#2196f3'
		}],
		thickness: 10,
	}
});
					

A radial stacked progress bar with 2 series


new ProgressBar({
	target: document.getElementById('demo10'),
	props: {
		style: 'radial',
		series: [30, 20],
		thickness: 10,
		textSize: 80,
	}
});