JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<p>
    How many
    <span class="dynamo">
    <span class="dynamo-option dynamo-current">.</span>
    <span class="dynamo-option">..</span>
    <span class="dynamo-option">...</span>
  </span> dots ?
</p>
<p>
    How many
    <span class="dynamo" style="text-align:center">
    <span class="dynamo-option dynamo-current">.</span>
    <span class="dynamo-option">..</span>
    <span class="dynamo-option">...</span>
  </span> dots ?
</p>

CSS

body {
  line-height: 1.4em;  
}
.dynamo {
  display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
  height: 1.4em; /* line-height*/
  vertical-align: text-top;
}
.dynamo-option {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height .2s;
  -webkit-transition: height .2s;
}
.dynamo-current {
  height: 100%;
}

JavaScript

jQuery(function($) {
    $('.dynamo').each(function() {
      var
      options = $(this).children('.dynamo-option'),
      c = options.first().addClass('dynamo-current');
      setInterval(function(){
        c.removeClass('dynamo-current');
        if(c.next().length) {
          c = c.next().addClass('dynamo-current');
        } else {
          c = options.first().addClass('dynamo-current');
        }
      }, 1000);
    });
});