Doughnut Progress Bar

Options

new DoughnutProgressBar({
    element: document.querySelector('.progress-bar1'),
    innerR: 60,
    outerR: 70,
    colorStart: '#6ed6a0',
    colorEnd: '#5bb8ff',
    percentage: 10,
    duration: 300
})

new DoughnutProgressBar({
    element: document.querySelector('.progress-bar2'),
    innerR: 30,
    outerR: 70,
    colorStart: '#5bb8ff',
    colorEnd: '#6e85ff',
    fillColor: '#6e85ff',
    percentage: 20,
    duration: 600
})

new DoughnutProgressBar({
    element: document.querySelector('.progress-bar3'),
    innerR: 130,
    outerR: 140,
    colorStart: '#6e85ff',
    colorEnd: '#ff8073',
    percentage: 30,
    duration: 900
})

new DoughnutProgressBar({
    element: document.querySelector('.progress-bar4'),
    innerR: 70,
    outerR: 140,
    colorStart: '#ff8073',
    colorEnd: '#ffbe32',
    percentage: 40,
    duration: 1200
})

API

setPercentage(number, callback)

Animates progress bar to a given percentage. Calls an optional callback function when done.