CSS
* {
box-sizing: border-box;
}
html, body {
background: #333;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
animation: rotate 0.8s infinite linear;
position: relative;
display: block;
width: 142px;
height: 142px;
}
.spinner i {
animation: rotate 3s infinite linear;
transform-origin: 50% 100% 0;
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
border: solid 12px transparent;
border-bottom: none;
}
.spinner i:nth-child(1) {
animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
width: 44px;
height: 22px;
margin-top: -22px;
margin-left: -22px;
border-color: #2172b8;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
}
.spinner i:nth-child(2) {
animation-timing-function: cubic-bezier(0.09, 0.4, 0.14, 0.03);
width: 58px;
height: 29px;
margin-top: -29px;
margin-left: -29px;
border-color: #18a39b;
border-top-left-radius: 42px;
border-top-right-radius: 42px;
}
.spinner i:nth-child(3) {
animation-timing-function: cubic-bezier(0.09, 0.6, 0.16, 0.03);
width: 72px;
height: 36px;
margin-top: -36px;
margin-left: -36px;
border-color: #82c545;
border-top-left-radius: 48px;
border-top-right-radius: 48px;
}
.spinner i:nth-child(4) {
animation-timing-function: cubic-bezier(0.09, 0.8, 0.18, 0.03);
width: 86px;
height: 43px;
margin-top: -43px;
margin-left: -43px;
border-color: #f8b739;
border-top-left-radius: 54px;
border-top-right-radius: 54px;
}
.spinner i:nth-child(5) {
animation-timing-function: cubic-bezier(0.09, 1.0, 0.20, 0.03);
width: 100px;
height: 50px;
margin-top: -50px;
margin-left: -50px;
border-color: #f06045;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
}
.spinner i:nth-child(6) {
animation-timing-function: cubic-bezier(0.09, 1.2, 0.22, 0.03);
width: 114px;
height: 57px;
margin-top: -57px;
margin-left: -57px;
border-color: #ed2861;
border-top-left-radius: 66px;
border-top-right-radius: 66px;
}
.spinner i:nth-child(7) {
animation-timing-function: cubic-bezier(0.09, 1.4, 0.24, 0.03);
width: 128px;
height: 64px;
margin-top: -64px;
margin-left: -64px;
border-color: #c12680;
border-top-left-radius: 72px;
border-top-right-radius: 72px;
}
.spinner i:nth-child(8) {
animation-timing-function: cubic-bezier(0.09, 1.6, 0.26, 0.03);
width: 142px;
height: 71px;
margin-top: -71px;
margin-left: -71px;
border-color: #5d3191;
border-top-left-radius: 78px;
border-top-right-radius: 78px;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
