progress blocks

by Soviut

HTML

<div class="loading"></div>

CSS

.loading {
  display: block;
  position: relative;
  width: 5px;
  height: 10px;
  
  background: #6699CC;
}

.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  display: block;
  width: 5px;
  height: 10px;  

  background: red;

  animation: pulse 1s 200ms linear infinite;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  display: block;
  width: 5px;
  height: 10px;

  background: green;
  
  animation: pulse 1s 400ms linear infinite;
}

@keyframes pulse {
  0%, 30% { transform: scale(1.0); }
  50% { transform: scale(2.0); }
  100% { transform: scale(1.0); }
}