CSS
* {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #34495e;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
.circle {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background-color: #fff;
}
.circle:after {
content: "LOADING";
position: absolute;
letter-spacing: 4px;
top: 150px;
width: 250px;
color: #fff;
text-align: center;
animation: fadeinout .5s ease-in-out alternate infinite;
}
.circle:before {
content: "";
position: absolute;
top: 125px;
left: -1px;
width: 252px;
height: 126px;
background-color: #34495e;
}
.circle-inner {
position: relative;
top: 30px;
left: 30px;
width: 190px;
height: 190px;
border-radius: 50%;
background-color: #34495e;
animation: inneranim .5s ease-in-out alternate infinite;
}
.circle-cutter {
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 250px;
border-radius: 50%;
transform-origin: top top;
animation: animrotate 1s ease-in-out alternate infinite;
}
.circle-cutter:after {
content: "";
position: absolute;
top: 125px;
left: -1px;
width: 252px;
height: 126px;
background-color: #34495e;
}
@keyframes inneranim {
0% {
top: 30px;
left: 30px;
width: 190px;
height: 190px;
}
100% {
top: 3px;
left: 3px;
width: 244px;
height: 244px;
}
}
@keyframes animrotate {
0% { transform: rotate(160deg); }
100% { transform: rotate(-160deg); }
}
@keyframes fadeinout {
0% { opacity: 1; }
100% { opacity: 0; }
}
1 Response