<div class="loader"></div>
* { box-sizing: border-box; }
body {
background-color: black;
color: white;
}
.loader {
height: 50px;
margin: 10%;
padding: 5px;
position: relative;
width: 50px;
&:before,
&:after {
border: 2px solid white;
content: "\0020";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
&:before {
z-index: 1;
animation: tiny-pulse 3s infinite 1s alternate;
}
&:after {
animation: pulse 3s infinite 1s alternate;
z-index: 2;
}
}
@keyframes tiny-pulse {
50% {
border-color: pink;
transform: rotate( -90deg );
}
100% {
transform: rotate(-135deg);
}
}
@keyframes pulse {
50% {
opacity: 1;
transform: rotate( 45deg );
}
100% {
transform: rotate( 90deg );
}
}
View Compiled
This Pen doesn't use any external CSS resources.