JSFiddle - React, Tailwind, and code Playground

by Slavik_ok

HTML

<div id="container">

</div>

CSS

#container {
  width: 100%;
  text-align: center;
}

.wrapper {
  width: 100%;
  height: 5px;
  margin-bottom: 0px;  
  border: 1px solid #7f8c8d;  
}

.progress {
  width: 0%;
  height: 100%;
  background: #95a5a6;
  /* transition: all 5s cubic-bezier(0.39, 0.575, 0.565, 1); */
}

.full {
  width: 100%;
}

JavaScript

var time = "5s";
var progressBars = [];
var container = document.getElementById("container");

var animations = [{"name":"easeOutSine","animation":"cubic-bezier(0.39, 0.575, 0.565, 1)"},
{"name":"easeInOutSine","animation":"cubic-bezier(0.445, 0.05, 0.55, 0.95)"},
{"name":"easeInQuad","animation":"cubic-bezier(0.55, 0.085, 0.68, 0.53)"},
{"name":"easeOutQuad","animation":"cubic-bezier(0.25, 0.46, 0.45, 0.94)"},
{"name":"easeInOutQuad","animation":"cubic-bezier(0.455, 0.03, 0.515, 0.955)"},
{"name":"easeInCubic","animation":"cubic-bezier(0.55, 0.055, 0.675, 0.19)"},
{"name":"easeOutCubic","animation":"cubic-bezier(0.215, 0.61, 0.355, 1)"},
{"name":"easeInOutCubic","animation":"cubic-bezier(0.645, 0.045, 0.355, 1)"},
{"name":"easeInQuart","animation":"cubic-bezier(0.895, 0.03, 0.685, 0.22)"},
{"name":"easeOutQuart","animation":"cubic-bezier(0.165, 0.84, 0.44, 1)"},
{"name":"easeInOutQuart","animation":"cubic-bezier(0.77, 0, 0.175, 1)"},
{"name":"easeInQuint","animation":"cubic-bezier(0.755, 0.05, 0.855, 0.06)"},
{"name":"easeOutQuint","animation":"cubic-bezier(0.23, 1, 0.32, 1)"},
{"name":"easeInOutQuint","animation":"cubic-bezier(0.86, 0, 0.07, 1)"},
{"name":"easeInExpo","animation":"cubic-bezier(0.95, 0.05, 0.795, 0.035)"},
{"name":"easeOutExpo","animation":"cubic-bezier(0.19, 1, 0.22, 1)"},
{"name":"easeInOutExpo","animation":"cubic-bezier(1, 0, 0, 1)"},
{"name":"easeInCirc","animation":"cubic-bezier(0.6, 0.04, 0.98, 0.335)"},
{"name":"easeOutCirc","animation":"cubic-bezier(0.075, 0.82, 0.165, 1)"},
{"name":"easeInOutCirc","animation":"cubic-bezier(0.785, 0.135, 0.15, 0.86)"},
{"name":"easeInBack","animation":"cubic-bezier(0.6, -0.28, 0.735, 0.045)"},
{"name":"easeOutBack","animation":"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},
{"name":"easeInOutBack","animation":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}
];

function createProgressBar() {
		var wrapper = document.createElement("div");
    wrapper.className = "wrapper";
    var progress =...