<div id='sectionOff'>
  <p class='sectionOn changeLoadText'>Loading...</p><div class='startWave center'>
  <div class='startWave2 center'>
  <div class='startWave3 center'>
  <div class='startWave4 center'>
  <div class='startWave5 center'>
    
    </div></div></div></div>
</div>
$blue : #005899;
$orange : #e66000;
$green : #4CBF50;
$red : #de1414;
$yellow : #fcc900;
$standardAnimate : colorUp 4s infinite linear, wavy 4s infinite linear, borderUp 4s infinite linear;


@keyframes wavy {
  from  {transform: rotate(0deg); }
  from  {transform: rotate(360deg); }
}

@keyframes colorUp {
    0%   {background-color: $blue;}
    20%  {background-color: $orange;}
    40%  {background-color: $red;}
    60%  {background-color: $green;}
    80%  {background-color: $yellow;}
    100% {background-color: $blue;} 
}
 
@keyframes borderUp{
     0%  {border: 2px solid $blue;}
    20%  {border: 2px solid $orange;}
    40%  {border: 2px solid $red;}
    60%  {border: 2px solid $green;}
    80%  {border: 2px solid $yellow;}
    100% {border: 2px solid $blue;}  
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  background-color: white;
}

.startWave {
  justify-content: center;
  align-items: center;
  vertical-align: center;
  margin-top:25px;
  margin: auto;
  opacity: .3;
  width: 175px;
  height: 175px;
  margin-top:100px;
  transform-origin: 40% 20%;
  border-radius: 45%;
  animation: $standardAnimate;
}

.startWave2 {
  margin: auto;
  opacity: .8;
  background: $blue;
  width: 175px;
  height: 175px;
  transform-origin: 40% 30%;
  border-radius: 45%;
  animation: $standardAnimate;
}

.startWave3 {
  margin: auto;
  opacity: .8;
  background: $blue;
  width: 175px;
  height: 175px;
  transform-origin: 40% 40%;
  border-radius: 45%;
  animation: $standardAnimate;
}

.startWave4 {
  top: 100%;
  margin: auto;
  opacity: .8;
  background: $blue;
  width: 175px;
  height: 175px;
  transform-origin: 40% 50%;
  border-radius: 45%;
  animation: $standardAnimate;
}

.startWave5 {
  margin: auto; 
  background: $blue;
  width: 175px;
  height: 175px;
  transform-origin: 40% 60%;
  border-radius: 45%;
  animation: $standardAnimate;
}

#sectionOff {
  background-color: aliceblue;
  overflow: hidden;
  width: 600px;
  height: 600px;
  box-shadow: 0 5px 47px rgba($blue, .6);
}


#sectionOff::after {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 300;
  overflow: hidden;
}

.sectionOn {
  margin-bottom:-47%;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  text-align: center;
  padding:40% 0 20% 0;
  color: white;
  font-size: 45px;
  font-family: helvetica;
  text-shadow: 4px 0 $blue, 0 4px $blue, -4px 0 $blue, 0 -4px $blue;
}

p {
  animation: loading 10s infinite linear;
}
View Compiled
//TODO: Cleanup css, html, remove unused keyframes, border on circles?
//8-bit (text) loading screen with an infinite loading loop via HTML5/CSS3 (SCSS)

//Use all you like!

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.