<html>
<div class="text">
  <h1><i>Blazing Fast</i></h1>
  <h3>0.056 Mbps</h3>
  <p>sshhshsssszzzzzsssshhzzzeeeeeee</p>
</div>
<div class="loader-bar">
  <div class="block-border"></div>
 <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-border"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
  <div class="block-meter"></div>
</div>
</html>
html, main, div {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  text-align: center;
  margin-bottom: 10vw;
}

.text p {
  margin-top: 5vw;
}

.loader-bar {
  width: 60vw;
  height: 12vw;
  display: grid;
  grid-template-columns: repeat(3,2vw) repeat(10, 3vw 2vw) repeat(2,2vw);
  grid-template-rows: repeat(6,2vw);
}

.block-border {
  background-color: rgb(50,50,50);
}

.block-meter {
  background-color: rgb(100,200,100);
}

.block-border:nth-of-type(1) {
  grid-row: 1;
  grid-column: 3/-3;
}

.block-border:nth-of-type(2) {
  grid-row: -2;
  grid-column: 3/-3;
}

.block-border:nth-of-type(3) {
  grid-row: 3/5;
  grid-column: 1;
}

.block-border:nth-of-type(4) {
  grid-row: 3/5;
  grid-column: -2;
}

.block-border:nth-of-type(5) {
  grid-row: 2;
  grid-column: 2;
}

.block-border:nth-of-type(6) {
  grid-row: 2;
  grid-column: -3;
}

.block-border:nth-of-type(7) {
  grid-row: 5;
  grid-column: 2;
}

.block-border:nth-of-type(8) {
  grid-row: 5;
  grid-column: -3;
}

.block-meter:nth-of-type(9) {
  grid-row: 3/5;
  grid-column: 4;
}

.block-meter:nth-of-type(10) {
  grid-row: 3/5;
  grid-column: 6;
}

.block-meter:nth-of-type(11) {
  grid-row: 3/5;
  grid-column: 8;
}

.block-meter:nth-of-type(12) {
  grid-row: 3/5;
  grid-column: 10;
}

.block-meter:nth-of-type(13) {
  grid-row: 3/5;
  grid-column: 12;
  opacity: 0;
  animation: blinky1 2s linear forwards;
}

.block-meter:nth-of-type(14) {
  grid-row: 3/5;
  grid-column: 14;
  opacity: 0;
  animation: blinky1 2s 4s linear forwards;
}

.block-meter:nth-of-type(15) {
  grid-row: 3/5;
  grid-column: 16;
  opacity: 0;
  animation: blinky1 2s 8s linear forwards;
}

.block-meter:nth-of-type(16) {
  grid-row: 3/5;
  grid-column: 18;
  opacity: 0;
  animation: blinky2 3s 14s linear infinite;
}

@keyframes blinky1 {
  99% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes blinky2 {
  49% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.