JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<div id="loadingarea">
    <div id="progress1">
    </div>
    <div id="progress2">
    </div>
    <div id="progress3">
    </div>
    <div id="progress4">
    </div>
    <div id="progress5">
    </div>
</div>

CSS

body {
    background: black;
}

#loadingarea {
    height: 13px;
    width: 300px;
    border: 1px #bcbcbc solid; /* Old browsers */
border: 1px -moz-linear-gradient(top, #bcbcbc 0%, #c2c2c2 50%, #9e9e9e 50%, #6c6c6c 100%) solid; /* FF3.6+ */
border: 1px -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bcbcbc), color-stop(50%,#c2c2c2), color-stop(50%,#9e9e9e), color-stop(100%,#6c6c6c)) solid; /* Chrome,Safari4+ */
border: 1px -webkit-linear-gradient(top, #bcbcbc 0%,#c2c2c2 50%,#9e9e9e 50%,#6c6c6c 100%) solid; /* Chrome10+,Safari5.1+ */
border: 1px linear-gradient(top, #bcbcbc 0%,#c2c2c2 50%,#9e9e9e 50%,#6c6c6c 100%) solid; /* W3C */
    position: relative;
    overflow: hidden;
}

#progress1, #progress2, #progress3, #progress4, #progress5 {
    height: 13px;
    width: 3px;
    position: absolute;
    background: #e7fa42; /* Old browsers */
    background: -moz-linear-gradient(top, #e7fa42 0%, #738e02 50%, #415901 50%, #627c02 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7fa42), color-stop(50%,#738e02), color-stop(50%,#415901), color-stop(100%,#627c02)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e7fa42 0%,#738e02 50%,#415901 50%,#627c02 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #e7fa42 0%,#738e02 50%,#415901 50%,#627c02 100%); /* W3C */
}

#progress1 {
    -webkit-animation: ltr1 3s infinite linear;
    -moz-animation: ltr1 3s infinite linear;
}

#progress2 {
    -webkit-animation: ltr2 3s infinite linear;
    -moz-animation: ltr2 3s infinite linear;
}

#progress3 {
    -webkit-animation: ltr3 3s infinite linear;
    -moz-animation: ltr3 3s infinite linear;
}

#progress4 {
    -webkit-animation: ltr4 3s infinite linear;
    -moz-animation: ltr4 3s infinite linear;
}

#progress5 {
    -webkit-animation: ltr5 3s infinite linear;
    -moz-animation: ltr5 3s infinite linear;
}

@-webkit-keyframes ltr1 {
    0% { left: -75px; }
100% { left:...