Edge logo - preloader - SCSS

by Lio Fleishman

HTML

<div class="content">
  <p>Loading...</p>
  <div class="loading">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
  </div>
</div>

SCSS

$blue: #0875bf;
$font: 'Helvetica Neue',Helvetica,Arial,sans-serif;

@keyframes loading {
  0% {
    transform: translateX(30%);
  }
  100% {
    transform: translateX(-30%);
  }
}

body {
  font:30px $font;
	font-weight: 300;
}

div.content {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.l1 {
  background:$blue;
  height:15px;
  width:60px;
  margin:10px;
  border-radius: 2px;
	animation:loading .8s .5s infinite ease-in-out alternate;
}

.l2 {
	@extend .l1;
	width:50px;
	margin-left: -10px;
	animation-delay: .3s;
}

.l3 {
  @extend .l1;
	animation-delay: .1s;
}