CSS
*, *:after, *:before {
box-sizing: border-box;
}
*:before, *:after {
position: absolute;
content: '';
display: block;
}
html {
background: #333;
}
body {
margin: 400px auto;
position: relative;
width: 20px;
height: 20px;
transform: rotate(45deg);
border-top-left-radius: 100%;
animation: signal01 1s infinite;
border-left: 20px solid #dbd9d2;
border-top: 20px solid #dbd9d2;
}
body:before, body:after {
border-top-left-radius: inherit;
border-top: inherit;
border-left: inherit;
}
body:before {
width: 60px;
height: 60px;
top: -60px;
left: -60px;
animation: signal02 1s infinite;
}
body:after {
width: 100px;
height: 100px;
top: -100px;
left: -100px;
animation: signal03 1s infinite;
}
@keyframes signal01 {
0%, 15%, 35%, 60%, 80%, 100% {
border-left: 20px solid #ddd;
border-top: 20px solid #ddd;
}
20%, 30%, 85%, 95% {
border-left: 20px solid #2980b9;
border-top: 20px solid #2980b9;
}
}
@keyframes signal02 {
0%, 30%, 50%, 65%, 85%, 100% {
border-left: 20px solid #ddd;
border-top: 20px solid #ddd;
}
35%, 45%, 70%, 80% {
border-left: 20px solid #2980b9;
border-top: 20px solid #2980b9;
}
}
@keyframes signal03 {
0%, 45%, 70%, 100% {
border-left: 20px solid #ddd;
border-top: 20px solid #ddd;
}
50%, 65% {
border-left: 20px solid #2980b9;
border-top: 20px solid #2980b9;
}
}
