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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js"
        integrity="sha512-vPeZ7JCboHcfpqSx5ZD+/jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU+oujBJKnWmu4hU7r9MMQNWPfXsYw=="
        crossorigin="anonymous"></script>
</body>

</html>

CSS

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

JavaScript

function create_progressbar(dur_time = 2000) {
   const random = randomColor();
   let bar = new ProgressBar.Line(progressbar, {
       strokeWidth: 2,
       easing: 'easeInOut',
       duration: dur_time,
       color: random,
       trailColor: '#eee',
       trailWidth: 2,
       svgStyle: { width: '100%', height: '100%' }
    });
    return bar;
}
let bar = create_progressbar();
bar.animate(1.0);