Sound Beat Loading Animation
HTML
<div class="loading">
<div class="loading-1"></div>
<div class="loading-2"></div>
<div class="loading-3"></div>
<div class="loading-4"></div>
<div class="loading-5"></div>
<div class="loading-6"></div>
<div class="loading-7"></div>
<div class="loading-8"></div>
<div class="loading-9"></div>
<div class="loading-10"></div>
</div>
SCSS
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes loading {
0% { border-top-color: #d13632; }
11% { border-top-color: #e2571e; }
22% { border-top-color: #E09128; }
33% { border-top-color: #ffe400; }
44% { border-top-color: #7dd132; }
50% { height: 100px; margin-top: 0px; }
55% { border-top-color: #32D152; }
66% { border-top-color: #32d15b; }
77% { border-top-color: #32bcd1; }
88% { border-top-color: #323ad1; }
99% { border-top-color: #cb32d1; }
100% { border-top-color: #cb32d1; }
}
@mixin inner() {
height: 10px;
width: 30px;
background-color: #fff;
display: inline-block;
margin-top: 90px;
animation: loading 1.5s infinite;
border-top: 8px solid #333;
}
@mixin loading() {
@for $i from 1 through 10 {
.loading-#{$i} { @include inner(); -webkit-animation-delay: $i/4+s; animation-delay: $i/4+s; }
}
}
.loading { @include loading(); }
