JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

CSS

.jQprogressText {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.0;
  font-family: 'MS Gothic', monospace;
}
.jQprogressText span {
  display: block;
  text-align: left;
  font-size: 12px;
  line-height: 1.0;
  font-family: 'MS Gothic', monospace;
}

JavaScript

/*
 * jQuery.textProgress 1.0.0
 * ---------------------------------------------
 * ######################################## 100%
 * ---------------------------------------------
 */
(function($){
$.fn.textProgress = function(j){
  var jqnl = {
    'jQnL'        : 'jQprogressText',
    'frame'       : '-',
    'loader'      : '#',
    'interval'    : 100,
    'number'      : 20,
    'complete'    : ' 100%',
    'completeLen' : null
  };

  if (j) $.extend(jqnl, j);

  var $_cnt = 0;
  var $_frm_pre = '';
  var $_len = jqnl.number - 1;
  var $_com = jqnl.completeLen || jqnl.complete.length;
  var $_lim = $_len - ($_com + 2);

  for (var i=0; i<$_len; i++) $_frm_pre += jqnl.frame;

  with ($(this))
  {
    append('<div />');

    var $cld = children('div');
    $cld.addClass(jqnl.jQnL).append('<span /><span /><span />');

    $cld.children('span:eq(0)').append($_frm_pre);
    $cld.children('span:eq(1)').append(jqnl.loader);
    $cld.children('span:eq(2)').append($_frm_pre);

    var nowloadingtext = function()
    {
      if ( $_lim >= $_cnt )
      {
        $cld.children('span:eq(1)').append( jqnl.loader );
        $_cnt++;
        return false;
      }
      else
      {
        $cld.children('span:eq(1)').append( jqnl.complete );
        clearInterval( intervalID );
        return true;
      }
    };
    var intervalID = setInterval(nowloadingtext, jqnl.interval);
  }
};
})(jQuery);


$(document).ready(function(){

  $('#test1').textProgress();
  $('#test2').textProgress({'interval':350});
  $('#test3').textProgress({
    'interval'    : 50,
    'completeLen' : 6,
    'number'      : 50,
    'complete'    : ' TADA!'
  });

});