JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="track"><span></span></div>







<div id="follow" onclick="window.parent.location='http://forrst.com/people/jakiestfu'">Codepress Coming Soon. Follow me on Forrst</div>

CSS

/* Pulsating Loading Bar - Codepress */

.track{
    height:5px;
    width:300px;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.3);
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.7);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.7);
    box-shadow:0 1px 2px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.7);
} 

.track span{
    display:block;
    margin:0;
    padding:0;
    height:5px;
    border-radius:5px;
    width:0%;
    background-color:#fff;

    -webkit-transition: box-shadow 2s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: box-shadow 2s ease-out;  /* FF4+ */
      -ms-transition: box-shadow 2s ease-out;  /* IE10 */
       -o-transition: box-shadow 2s ease-out;  /* Opera 10.5+ */
          transition: box-shadow 2s ease-out;
}
.track span.glow{
    -webkit-box-shadow:0 0 10px #fff;
    -moz-box-shadow:0 0 10px #fff;
    box-shadow:0 0 10px #fff;
}




/* Demo Styles */
body{background:#999;}.track{ margin: 50px auto;}#follow{font-family: arial;text-align: center;color: #222;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);display:none;cursor:pointer;}

JavaScript

$bar = $('.track span');

setInterval(function(){
    $bar.toggleClass('glow');
}, 2000);

$bar.animate({
    width: '20%'
}, 3000, 'linear', function() {
    setTimeout(function() {
        $bar.animate({
            width: '50%'
        }, 1000, 'linear', function() {
            setTimeout(function() {
                $bar.animate({
                    width: '100%'
                }, 2000, 'linear', function() {
                    $('#follow').fadeIn();
                });
            }, 4000);
        });
    }, 2000);
});