JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="progress container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<p id="text" class="typewrite" data-period="3000" data-type='[ "Connecting...", "Processing..." ]'></p>

CSS

.progress{
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -50px;
}
.progress span{
  transition: all 300ms ease;
  background: #FF5A0A;
  box-shadow: 1px 2px 3px #999;
  height: 10px;
  width: 10px;  
  display: inline-block;
  border-radius: 10px;
  animation: wave 2s ease  infinite;
}

.progress span:nth-child(1){  animation-delay: 0; }
.progress span:nth-child(2){  animation-delay: 100ms; }
.progress span:nth-child(3){  animation-delay: 200ms; }
.progress span:nth-child(4){  animation-delay: 300ms; }
.progress span:nth-child(5){  animation-delay: 400ms; }
.progress span:nth-child(6){  animation-delay: 500ms; }
.progress span:nth-child(7){  animation-delay: 600ms; }
.progress span:nth-child(8){  animation-delay: 700ms; }

#text {
  color: #373843;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.75em;
  font-weight: 400;
  position: absolute;
  top: calc(50% - 0.375em);
  left: 0;
  width: 70%;
  text-align: center;
  padding: 0 15%;
}

@keyframes wave{
  0%, 40%, 100% { 
    transform: translate(0, 0);
    background-color: #FF5A0A;    
  }
  10% { 
    transform: translate(0, -15px); 
    background-color: red;    
  }
}

JavaScript

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};


var elements = document.getElementsByClassName('typewrite');
for (var i = 0; i < elements.length; i++) {
  var toRotate = elements[i].getAttribute('data-type');
  var period = elements[i].getAttribute('data-period');
  if (toRotate) {
    new TxtType(elements[i], JSON.parse(toRotate), period);
  }
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #373843; }";
document.body.appendChild(css);