Svelte Progress bar

Fork me on GitHub

A multi-series SVG progress bar component made with Svelte 3. It can be rendered as a linear, radial (circular), semicircular or custom-shaped 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,
	}
});

A custom-shaped progress bar with 2 series


new ProgressBar({
	target: document.getElementById('demo11'),
	props: {
		style: 'custom',
		series: [40, 20],
		textSize: 80,
		pathFn: (vbWidth, vbHeight) => {
			const r =  vbHeight / 75;
			const conv = (n) => n * r;
			return [
				`m 100,${conv(28.725798)}`,
				`c 0,${conv(25.66017)} -23.183041,${conv(31.753094)} -50.003595,${conv(46.461851)}`,
				`C 25.525867,${conv(62.537096)} 0.0013495,${conv(54.385968)} 0.0013495,${conv(28.725798)}`,
				`0,${conv(3.0656308)}`,
				`24.034805,${conv(-6.3583102)}`,
				`50.603797,${conv(6.5228733)}`,
				`78.022177,${conv(-7.0159179)}`,
				`100,${conv(3.0656308)}`,
				`100,${conv(28.725798)}`,
				`Z`,
			].join(' ');
		},
		width: 200,
		height: 150,
	}
});