JSFiddle - React, Tailwind, and code Playground

by jhogervorst

HTML

<p>Full bar:</p>
<div class="bar"></div>

<p>Half bar:</p>
<div class="half">
    <div class="bar"></div>
</div>

<p>Half bar, full width, and half speed:</p>
<div class="half full">
    <div class="bar"></div>
</div>

<p>Sexyness:</p>
<div class="half full sexy">
    <div class="border-overlay"></div>
    <div class="gradient-overlay"></div>
    <div class="bar"></div>
</div>

CSS

body { padding: 20px; font-family: Helvetica, Arial, sans-serif; }
p { margin: 20px 0 5px; }
p:first-child { margin-top: 0; }

@-webkit-keyframes moving-gradient {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
}

.bar {
    width: 400px;
    height: 30px;
    
    background: -webkit-linear-gradient(
        left,
        #0193CD 30%,
        #66D4E5 80%,
        #0193CD 100%
    ) repeat;
    
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.half { width: 200px; overflow-x: hidden; }
.half.full { width: 400px; }
.half .bar { width: 200%; }
.half.full .bar { -webkit-animation-duration: 2s; }

.sexy {
    border: 1px solid #adadad;
    -webkit-border-radius: 2px;
}

.sexy .gradient-overlay {
    position: absolute;
    width: 400px;
    height: 30px;
    
    background-image: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .4) 50%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, .2) 100%
    );
}

.sexy .border-overlay {
    position: absolute;
    width: 398px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .15);
}