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 = 3000) {
  const colors = ["#9ACD32", "#40E0D0", "#EE82EE", "#FF6347", "#6A5ACD", "#4169E1", "#FA8072", "#800080", "#663399", "#FFA500", "#DA70D6", "#6B8E23"];
  let index = Math.floor(Math.random() * colors.length);
  const randomColor = colors[index];
  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);