<div class="container">
   <div class="loading-bar">
      <div class="loading-bar--progress">
         <span class="first"></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span class="last"></span>
      </div>
   </div>
   <p class="clickbait">
      <a href="#" onclick="javascript:history.go(0); return false;">Again!</a>
   </p>
</div>

<div class="by-jasper">
   <a href="https://codepen.io/jasper" target="_parent">By Jasper</a>
</div>

* {
   box-sizing: border-box;
}
.container {
   display: flex;
   width: 100vw;
   height: 100vh;
   background: #e5e5e5;
   border: 10px solid rgb(131, 125, 217);
}
.lollypop {
   font: 12px Arial;
   a {
      text-decoration: none;
      color: rgba(131, 125, 217, 1);
   }
}
.clickbait {
   margin: 1em;
   @extend .lollypop;
}

.loading-bar {
   width: 301px; // yeah, dont ask. there's probably a great mathematical reason why 301px looks better aligned than 300px but I stopped understanding math when they added numbers to it.
   background: #cecece;
   padding: 2px;
   border: 1px solid rgba(131, 125, 217, 1);
   border-radius: 6px;
   box-shadow: 0 0 20px 0 rgba(131, 125, 217, 0.5);
   margin: auto;
   &--progress {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      align-content: center;
      & span {
         margin: auto;
         background: rgba(131, 125, 217, 1);
         border-radius: 4px;
         flex-basis: 11%;
         flex-grow: 1;
         flex-shrink: 1;
         height: 20px;
         animation: FadeIn 0.5s ease;
         transition: all 1s cubic-bezier(0.17, 0.67, 0.88, 0.17);
         &:first-of-type {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
         }
         &:last-of-type {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
         }
      }
   }
}

.by-jasper {
   position: absolute;
   bottom: 2em;
   right: 2em;
   @extend .lollypop;
}

@keyframes FadeIn {
   0% {
      opacity: 0;
      transform: scale(0.1);
      background: rgba(131, 125, 217, 1);
      border-radius: 4px;
   }

   85% {
      opacity: 1;
      background: rgb(131, 125, 217);
      background: linear-gradient(
         180deg,
         rgba(131, 125, 217, 1) 0%,
         rgba(57, 55, 131, 1) 56%,
         rgba(9, 9, 121, 1) 100%
      );
      border-radius: 0;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
   }
   100% {
      transform: scale(1);
      background: rgb(131, 125, 217);
      background: linear-gradient(
         180deg,
         rgba(131, 125, 217, 1) 0%,
         rgba(57, 55, 131, 1) 56%,
         rgba(9, 9, 121, 1) 100%
      );
      border-radius: 0;
   }
}
@for $i from 1 through 12 {
   .loading-bar--progress span:nth-child(#{$i}n) {
      animation-delay: #{$i * 0.15}s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
   }
}

.loading-bar--progress .first {
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;
}
.loading-bar--progress .last {
   border-top-right-radius: 4px !important;
   border-bottom-right-radius: 4px !important;
}