Wifinovej loader

by Petr Haluza

HTML

<div class="wifi-loader">
  <div class="wifi-loader-bod">
	  <div class="wifi-loader-eff"></div>
  </div>
</div>

CSS

.wifi-loader { position:fixed; background:rgba(255,255,255,.8); width:100%; height:100%; margin:0}
.wifi-loader-bod { height:25px;width:25px;border-radius:50%;position:absolute;margin:auto;left:0;right:0;top:50%;background-color: #d5d5d5;animation: glow1 3s infinite;}

.wifi-loader-eff { height:75px;width:75px;border: 25px solid transparent;border-top: 25px solid #d5d5d5;border-radius: 50%;position:absolute;top:-50px;left:-50px;animation: glow2 3s infinite}

.wifi-loader-eff:before { position:absolute;content:"";height: 165px;width: 165px;border: 25px solid transparent;border-top: 25px solid #d5d5d5;border-radius: 50%;right:-70px;top:-75px;animation: glow3 3s infinite}

.wifi-loader-eff:after { position:absolute;content:"";height: 260px;width: 260px;border: 25px solid transparent;border-top: 25px solid #d5d5d5;border-radius: 50%;right:-117.5px;top:-125px;animation: glow4 3s infinite}
@keyframes glow1 {
19% {background-color:#d5d5d5}
30% {background-color:#05b5cd}
86% {background-color:#05b5cd}
90% {background-color:#d5d5d5}
}
@keyframes glow2 {
29% {border-top-color:#d5d5d5}
40% {border-top-color:#05b5cd}
89% {border-top-color:#05b5cd}
94% {border-top-color:#d5d5d5}
}
@keyframes glow3 {
39% {border-top-color:#d5d5d5}
50% {border-top-color:#05b5cd}
92% {border-top-color:#05b5cd}
97% {border-top-color:#d5d5d5}
}
@keyframes glow4 {
49% {border-top-color:#d5d5d5}
60% {border-top-color:#05b5cd}
95% {border-top-color:#05b5cd}
100% {border-top-color:#d5d5d5}
}