forked from loadingio/css-spinner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ring.html
34 lines (33 loc) · 711 Bytes
/
ring.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="lds-css">
<div class="lds-ring" style="width:100%;height:100%"><div></div><div></div><div></div><div></div></div>
<style type="text/css">
@keyframes lds-ring {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.lds-ring > div{
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
border: 20px solid #fff;
border-color: #fff transparent transparent transparent;
animation: lds-ring 1.5s cubic-bezier(0.5,0,0.5,1) infinite;
}
.lds-ring > div:nth-child(2) {
animation-delay: .195s;
}
.lds-ring > div:nth-child(3) {
animation-delay: .39s;
}
.lds-ring > div:nth-child(4) {
animation-delay: .585s;
}
</style>
</div>