HTML
<div class="loader">
<div class="triangle">
<div class="dot dot1"><div class="in"></div></div>
<div class="dot dot2"><div class="in"></div></div>
<div class="dot dot3"><div class="in"></div></div>
</div>
<div class="triangle triangle1">
<div class="dot dot1"><div class="in"></div></div>
<div class="dot dot2"><div class="in"></div></div>
<div class="dot dot3"><div class="in"></div></div>
</div>
</div>
CSS
body {
background: #000;
}
@keyframes glow {
50% {
transform: scale(.5);
}
}
.triangle {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(0deg) translateY(-4px);
}
.triangle1 {
transform: rotate(180deg) translateY(-4px);
}
.dot {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
}
.in {
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
transform-origin: 50% 50%;
animation: glow .6s ease-in-out infinite;
box-shadow: 0 0 16px 8px rgba(255,255,255,.2);
}
.triangle1 .in {
animation-delay: .3s;
}
.dot0 {
background: #000;
}
.dot1 {
transform: translateX(16px) translateY(13px) ;
}
.dot2 {
transform: translateX(-16px) translateY(13px) ;
}
.dot3 {
transform: translateX(0px) translateY(-13px) ;
}
