JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progressbar</title>
</head>

<body>
    <div id="progressbar"></div>

    <main role="main" class="container">

        <div class="row">
        <h1>Progressbar with different colors</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.6.1/progressbar.min.js"
        integrity="sha512-7IoDEsIJGxz/gNyJY/0LRtS45wDSvPFXGPuC7Fo4YueWMNOmWKMAllEqo2Im3pgOjeEwsOoieyliRgdkZnY0ow=="
        crossorigin="anonymous"></script>
</body>

</html>

CSS

#progressbar {
            margin: 0;
            width: 100%;
            z-index: 1000;
        }

JavaScript

function create_progressbar(dur_time = 5000) {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
    let bar = new ProgressBar.Line(progressbar, {
        strokeWidth: 2,
        easing: 'easeInOut',
        duration: dur_time,
        color: "#" + randomColor,
        trailColor: '#eee',
        trailWidth: 2,
         svgStyle: { width: '100%', height: '100%' }
    });
    return bar;
}

let bar = create_progressbar();
bar.animate(1.0);