JSFiddle - React, Tailwind, and code Playground

by teknoblogo

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pure CSS Progress Bar</title>
</head>
<body>
    <div id="container">
        <div id="progress_bar" class="ui-progress-bar ui-container">
            <div class="ui-progress" style="width: 79%;">
                <span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
            </div><!-- .ui-progress -->
        </div><!-- #progress_bar --> 
 
        <div class="content" id="main_content" style="display: none;">
            <p>Hello, World!</p>
        </div><!-- #main_content -->
    </div><!-- #container -->
</body>
</html>

CSS

body {
  background:url(http://www.photoshopstar.com/tutorials/41/10big.jpg) no-repeat center;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}
 
#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;
 
}
 
.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 
 
.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}
@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }
 
  to {
   background-position: 44px 0;
  }
}      
 
.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        
 
.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ),...

JavaScript

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 
 
        easing: 'swing',
 
        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);
 
          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }
 
          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );
 
$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');
 
  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });
 
});