Default speed, default radius, tiles growing.
const config = {
canvas: document.querySelector('.progress-bar1'),
tiles: 30,//number of "dashes"
radius: 75,//size
gapSize: 0.25,//0-1 size of the gap between tiles
startWidth: 2,//animation - starting width of the tile
endWidth: 14,//animation - end width of the tile
animationStep: 0.015//animation - speed
};
const bar = new DashedProgressBar(config);
bar.addTiles(randomAmount, '#6ed6a0');
bar.addTiles(randomAmount2, '#ffbe32');
bar.animate();
Faster, bigger radius, tiles shrinking.
const config = {
canvas: document.querySelector('.progress-bar2'),
tiles: 30,
radius: 80,
gapSize: 0.25,
startWidth: 24,
endWidth: 8,
animationStep: 0.03
};
Only 3 tiles, shrinking, fast.
const config = {
canvas: document.querySelector('.progress-bar3'),
tiles: 3,
radius: 70,
gapSize: 0.4,
startWidth: 64,
endWidth: 12,
animationStep: 0.03
};
100 tiles, growing, default speed.
const config = {
canvas: document.querySelector('.progress-bar4'),
tiles: 100,
radius: 100,
gapSize: 0.2,
startWidth: 2,
endWidth: 20,
animationStep: 0.015
};