console
<ul class="box">
<li><b class="icon-loading-a"></b></li>
<li><b class="icon-loading-a-min"></b></li>
<li><b class="icon-loading-b"></b></li>
<li><b class="icon-loading-b-min"></b></li>
</ul>
li {
width: 32px;
height: 32px;
padding: 2em;
margin: 5px;
border: 1px solid
list-style: none;
float: left;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
@keyframes am-load-a {
00% {
background: radial-gradient(circle at 23%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
}
2% {
background: radial-gradient(circle at 27%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
}
4% {
background: radial-gradient(circle at 31%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
}
6% {
background: radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
}
8% {
background: radial-gradient(circle at 38%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
}
10% {
background: radial-gradient(circle at 41%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
}
12% {
background: radial-gradient(circle at 44%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
}
14% {
background: radial-gradient(circle at 47%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
16% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%);
}
18% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
20% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
}
22% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
}
24% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
}
26% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
}
28% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
}
30% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
}
32% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
}
34% {
background: radial-gradient(circle at 23%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
}
36% {
background: radial-gradient(circle at 27%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
}
38% {
background: radial-gradient(circle at 31%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
}
40% {
background: radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
}
42% {
background: radial-gradient(circle at 38%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
}
44% {
background: radial-gradient(circle at 41%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
}
46% {
background: radial-gradient(circle at 44%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
}
48% {
background: radial-gradient(circle at 47%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
}
50% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%);
}
52% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
}
54% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
}
56% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
}
58% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
}
60% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
}
62% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
}
64% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
}
66% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
}
68% {
background: radial-gradient(circle at 23%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
}
70% {
background: radial-gradient(circle at 27%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
}
72% {
background: radial-gradient(circle at 31%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
}
74% {
background: radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
}
76% {
background: radial-gradient(circle at 38%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
}
78% {
background: radial-gradient(circle at 41%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
}
80% {
background: radial-gradient(circle at 44%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
}
82% {
background: radial-gradient(circle at 47%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
}
84% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%);
}
86% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
}
88% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
}
90% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
}
92% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
}
94% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
}
96% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
}
98% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
}
100% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
}
}
@keyframes am-load-a-min {
00% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
02% {
background: radial-gradient(circle at 45%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
04% {
background: radial-gradient(circle at 40%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
}
06% {
background: radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
}
08% {
background: radial-gradient(circle at 30%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
}
10% {
background: radial-gradient(circle at 25%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
}
12% {
background: radial-gradient(circle at 20%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
}
14% {
background: radial-gradient(circle at 15%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
}
16% {
background: radial-gradient(circle at 12%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
}
18% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
}
20% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
}
22% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
}
24% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
}
26% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
}
28% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
}
30% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
}
32% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
34% {
background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
}
36% {
background: radial-gradient(circle at 45%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 00%, transparent 00%), radial-gradient(circle at 55%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
}
38% {
background: radial-gradient(circle at 40%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 00%, transparent 00%), radial-gradient(circle at 60%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
}
40% {
background: radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 05%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
}
42% {
background: radial-gradient(circle at 30%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 70%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
}
44% {
background: radial-gradient(circle at 25%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
}
46% {
background: radial-gradient(circle at 20%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 80%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
}
48% {
background: radial-gradient(circle at 15%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
}
50% {
background: radial-gradient(circle at 12%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
}
52% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
}
54% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
}
56% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
}
58% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
}
60% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
}
62% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
}
64% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
}
66% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
}
68% {
background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
}
70% {
background: radial-gradient(circle at 45%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 00%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
}
72% {
background: radial-gradient(circle at 40%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 00%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
}
74% {
background: radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 05%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
}
76% {
background: radial-gradient(circle at 30%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
}
78% {
background: radial-gradient(circle at 25%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
}
80% {
background: radial-gradient(circle at 20%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
}
82% {
background: radial-gradient(circle at 15%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
}
84% {
background: radial-gradient(circle at 12%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
}
86% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
}
88% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
}
90% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
}
92% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
}
94% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
}
96% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
}
98% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
}
100% {
background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
}
}
.icon-loading-a {
width: 2em;
height: 2em;
animation: am-load-a 2s linear infinite both;
}
.icon-loading-a-min {
width: 2em;
height: 2em;
animation: am-load-a-min 2s linear infinite;
}
@keyframes am-loading-b {
0% {
background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
transform: rotate(0deg);
}
5% {
background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
10% {
background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
15% {
background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
20% {
background: radial-gradient(circle at 34% 34%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 34%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 34% 66%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 66%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
25% {
background: radial-gradient(circle at 37% 37%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 37%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 37% 63%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 63%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
30% {
background: radial-gradient(circle at 39% 39%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 39%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 39% 61%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 61%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
35% {
background: radial-gradient(circle at 42% 42%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 42%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 42% 58%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 58%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
40% {
background: radial-gradient(circle at 45% 45%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 45%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 45% 55%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 55%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
45% {
background: radial-gradient(circle at 47% 47%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 47%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 47% 53%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 53%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
50% {
background: radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 50% 50%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 50% 50%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 50% 50%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
55% {
background: radial-gradient(circle at 47% 47%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 47%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 47% 53%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 53%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
60% {
background: radial-gradient(circle at 45% 45%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 45%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 45% 55%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 55%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
65% {
background: radial-gradient(circle at 42% 42%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 42%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 42% 58%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 58%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
70% {
background: radial-gradient(circle at 39% 39%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 39%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 39% 61%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 61%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
75% {
background: radial-gradient(circle at 37% 37%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 37%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 37% 63%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 63%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
80% {
background: radial-gradient(circle at 34% 34%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 34%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 34% 66%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 66%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
85% {
background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
90% {
background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
95% {
background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
}
100% {
background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 20%, transparent 0%), radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
transform: rotate(360deg);
}
}
@keyframes am-loading-b-min {
0% {
background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 15%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 15%, transparent 0%), radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 15%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 15%, transparent 0%);
transform: rotate(0deg);
}
10% {
background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 16%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 16%, transparent 0%), radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 16%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 16%, transparent 0%);
}
20% {
background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 17%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 17%, transparent 0%), radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 17%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 17%, transparent 0%);
}
30% {
background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 18%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 18%, transparent 0%), radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 18%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 18%, transparent 0%);
}
40% {
background: radial-gradient(circle at 32% 32%, rgba(255, 68, 68, 0.8) 18%, transparent 0%), radial-gradient(circle at 68% 32%, rgba(255, 187, 50, 0.85) 18%, transparent 0%), radial-gradient(circle at 32% 68%, rgba(153, 204, 0, 0.8) 18%, transparent 0%), radial-gradient(circle at 68% 68%, rgba(51, 181, 229, 0.8) 18%, transparent 0%);
}
50% {
background: radial-gradient(circle at 33% 33%, rgba(255, 68, 68, 0.8) 18%, transparent 0%), radial-gradient(circle at 67% 33%, rgba(255, 187, 50, 0.85) 18%, transparent 0%), radial-gradient(circle at 33% 67%, rgba(153, 204, 0, 0.8) 18%, transparent 0%), radial-gradient(circle at 67% 67%, rgba(51, 181, 229, 0.8) 18%, transparent 0%);
}
60% {
background: radial-gradient(circle at 32% 32%, rgba(255, 68, 68, 0.8) 18%, transparent 0%), radial-gradient(circle at 68% 32%, rgba(255, 187, 50, 0.85) 18%, transparent 0%), radial-gradient(circle at 32% 68%, rgba(153, 204, 0, 0.8) 18%, transparent 0%), radial-gradient(circle at 68% 68%, rgba(51, 181, 229, 0.8) 18%, transparent 0%);
}
70% {
background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 18%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 18%, transparent 0%), radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 18%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 18%, transparent 0%);
}
80% {
background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 17%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 17%, transparent 0%), radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 17%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 17%, transparent 0%);
}
90% {
background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 16%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 16%, transparent 0%), radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 16%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 16%, transparent 0%);
}
100% {
background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 15%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 15%, transparent 0%), radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 15%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 15%, transparent 0%);
transform: rotate(360deg);
}
}
.icon-loading-b {
width: 1em;
height: 1em;
animation: am-loading-b 1s linear infinite both;
}
.icon-loading-b-min {
width: 1em;
height: 1em;
animation: am-loading-b-min 1s linear infinite both;
}