<div class="cssload-dots"><i class="cssload-dot-1"></i><i class="cssload-dot-2"></i><i class="cssload-dot-3"></i><i class="cssload-dot-4"></i><i class="cssload-dot-5"></i><i class="cssload-dot-6"></i>
</div>
.cssload-dots {
width: 292px;
margin: auto;
height: 97px;
position: relative;
top: 49px;
}
.cssload-dots i {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(0,0,0);
display: block;
position: absolute;
}
.cssload-dots .cssload-dot-1 {
background: rgb(182,86,77);
left: 49px;
animation: cssload-anim-1 2.3s linear infinite;
-o-animation: cssload-anim-1 2.3s linear infinite;
-ms-animation: cssload-anim-1 2.3s linear infinite;
-webkit-animation: cssload-anim-1 2.3s linear infinite;
-moz-animation: cssload-anim-1 2.3s linear infinite;
}
.cssload-dots .cssload-dot-2 {
background: rgb(216,174,92);
left: 0px;
animation: cssload-anim-2 2.3s linear infinite;
-o-animation: cssload-anim-2 2.3s linear infinite;
-ms-animation: cssload-anim-2 2.3s linear infinite;
-webkit-animation: cssload-anim-2 2.3s linear infinite;
-moz-animation: cssload-anim-2 2.3s linear infinite;
}
.cssload-dots .cssload-dot-3 {
background: rgb(138,222,163);
left: 146px;
animation: cssload-anim-3 2.3s linear infinite;
-o-animation: cssload-anim-3 2.3s linear infinite;
-ms-animation: cssload-anim-3 2.3s linear infinite;
-webkit-animation: cssload-anim-3 2.3s linear infinite;
-moz-animation: cssload-anim-3 2.3s linear infinite;
}
.cssload-dots .cssload-dot-4 {
background: rgb(138,222,163);
left: 97px;
animation: cssload-anim-4 2.3s linear infinite;
-o-animation: cssload-anim-4 2.3s linear infinite;
-ms-animation: cssload-anim-4 2.3s linear infinite;
-webkit-animation: cssload-anim-4 2.3s linear infinite;
-moz-animation: cssload-anim-4 2.3s linear infinite;
}
.cssload-dots .cssload-dot-5 {
background: rgb(216,174,92);
left: 244px;
animation: cssload-anim-5 2.3s linear infinite;
-o-animation: cssload-anim-5 2.3s linear infinite;
-ms-animation: cssload-anim-5 2.3s linear infinite;
-webkit-animation: cssload-anim-5 2.3s linear infinite;
-moz-animation: cssload-anim-5 2.3s linear infinite;
}
.cssload-dots .cssload-dot-6 {
background: rgb(182,86,77);
left: 195px;
animation: cssload-anim-6 2.3s linear infinite;
-o-animation: cssload-anim-6 2.3s linear infinite;
-ms-animation: cssload-anim-6 2.3s linear infinite;
-webkit-animation: cssload-anim-6 2.3s linear infinite;
-moz-animation: cssload-anim-6 2.3s linear infinite;
}
@keyframes cssload-anim-1 {
0% {
transform: rotate(-180deg) translate(49px);
}
16% {
transform: rotate(0deg) translate(49px);
}
18% {
transform: rotate(24deg) translate(49px);
}
20% {
transform: rotate(0deg) translate(49px);
}
33% {
transform: rotate(0deg) translate(49px);
}
66% {
transform: rotate(0deg) translate(49px);
}
83% {
transform: rotate(0deg) translate(49px);
}
100% {
transform: rotate(180deg) translate(49px);
}
}
@-o-keyframes cssload-anim-1 {
0% {
-o-transform: rotate(-180deg) translate(49px);
}
16% {
-o-transform: rotate(0deg) translate(49px);
}
18% {
-o-transform: rotate(24deg) translate(49px);
}
20% {
-o-transform: rotate(0deg) translate(49px);
}
33% {
-o-transform: rotate(0deg) translate(49px);
}
66% {
-o-transform: rotate(0deg) translate(49px);
}
83% {
-o-transform: rotate(0deg) translate(49px);
}
100% {
-o-transform: rotate(180deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-1 {
0% {
-ms-transform: rotate(-180deg) translate(49px);
}
16% {
-ms-transform: rotate(0deg) translate(49px);
}
18% {
-ms-transform: rotate(24deg) translate(49px);
}
20% {
-ms-transform: rotate(0deg) translate(49px);
}
33% {
-ms-transform: rotate(0deg) translate(49px);
}
66% {
-ms-transform: rotate(0deg) translate(49px);
}
83% {
-ms-transform: rotate(0deg) translate(49px);
}
100% {
-ms-transform: rotate(180deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-1 {
0% {
-webkit-transform: rotate(-180deg) translate(49px);
}
16% {
-webkit-transform: rotate(0deg) translate(49px);
}
18% {
-webkit-transform: rotate(24deg) translate(49px);
}
20% {
-webkit-transform: rotate(0deg) translate(49px);
}
33% {
-webkit-transform: rotate(0deg) translate(49px);
}
66% {
-webkit-transform: rotate(0deg) translate(49px);
}
83% {
-webkit-transform: rotate(0deg) translate(49px);
}
100% {
-webkit-transform: rotate(180deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-1 {
0% {
-moz-transform: rotate(-180deg) translate(49px);
}
16% {
-moz-transform: rotate(0deg) translate(49px);
}
18% {
-moz-transform: rotate(24deg) translate(49px);
}
20% {
-moz-transform: rotate(0deg) translate(49px);
}
33% {
-moz-transform: rotate(0deg) translate(49px);
}
66% {
-moz-transform: rotate(0deg) translate(49px);
}
83% {
-moz-transform: rotate(0deg) translate(49px);
}
100% {
-moz-transform: rotate(180deg) translate(49px);
}
}
@keyframes cssload-anim-2 {
0% {
transform: rotate(0deg) translate(49px);
}
16% {
transform: rotate(0deg) translate(49px);
}
33% {
transform: rotate(0deg) translate(49px);
}
66% {
transform: rotate(360deg) translate(49px);
}
68% {
transform: rotate(384deg) translate(49px);
}
70% {
transform: rotate(360deg) translate(49px);
}
100% {
transform: rotate(360deg) translate(49px);
}
}
@-o-keyframes cssload-anim-2 {
0% {
-o-transform: rotate(0deg) translate(49px);
}
16% {
-o-transform: rotate(0deg) translate(49px);
}
33% {
-o-transform: rotate(0deg) translate(49px);
}
66% {
-o-transform: rotate(360deg) translate(49px);
}
68% {
-o-transform: rotate(384deg) translate(49px);
}
70% {
-o-transform: rotate(360deg) translate(49px);
}
100% {
-o-transform: rotate(360deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-2 {
0% {
-ms-transform: rotate(0deg) translate(49px);
}
16% {
-ms-transform: rotate(0deg) translate(49px);
}
33% {
-ms-transform: rotate(0deg) translate(49px);
}
66% {
-ms-transform: rotate(360deg) translate(49px);
}
68% {
-ms-transform: rotate(384deg) translate(49px);
}
70% {
-ms-transform: rotate(360deg) translate(49px);
}
100% {
-ms-transform: rotate(360deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-2 {
0% {
-webkit-transform: rotate(0deg) translate(49px);
}
16% {
-webkit-transform: rotate(0deg) translate(49px);
}
33% {
-webkit-transform: rotate(0deg) translate(49px);
}
66% {
-webkit-transform: rotate(360deg) translate(49px);
}
68% {
-webkit-transform: rotate(384deg) translate(49px);
}
70% {
-webkit-transform: rotate(360deg) translate(49px);
}
100% {
-webkit-transform: rotate(360deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-2 {
0% {
-moz-transform: rotate(0deg) translate(49px);
}
16% {
-moz-transform: rotate(0deg) translate(49px);
}
33% {
-moz-transform: rotate(0deg) translate(49px);
}
66% {
-moz-transform: rotate(360deg) translate(49px);
}
68% {
-moz-transform: rotate(384deg) translate(49px);
}
70% {
-moz-transform: rotate(360deg) translate(49px);
}
100% {
-moz-transform: rotate(360deg) translate(49px);
}
}
@keyframes cssload-anim-3 {
0% {
transform: rotate(-180deg) translate(49px);
}
16% {
transform: rotate(-180deg) translate(49px);
}
33% {
transform: rotate(-360deg) translate(49px);
}
35% {
transform: rotate(-384deg) translate(49px);
}
37% {
transform: rotate(-360deg) translate(49px);
}
66% {
transform: rotate(-360deg) translate(49px);
}
83% {
transform: rotate(-540deg) translate(49px);
}
85% {
transform: rotate(-564deg) translate(49px);
}
87% {
transform: rotate(-540deg) translate(49px);
}
100% {
transform: rotate(-540deg) translate(49px);
}
}
@-o-keyframes cssload-anim-3 {
0% {
-o-transform: rotate(-180deg) translate(49px);
}
16% {
-o-transform: rotate(-180deg) translate(49px);
}
33% {
-o-transform: rotate(-360deg) translate(49px);
}
35% {
-o-transform: rotate(-384deg) translate(49px);
}
37% {
-o-transform: rotate(-360deg) translate(49px);
}
66% {
-o-transform: rotate(-360deg) translate(49px);
}
83% {
-o-transform: rotate(-540deg) translate(49px);
}
85% {
-o-transform: rotate(-564deg) translate(49px);
}
87% {
-o-transform: rotate(-540deg) translate(49px);
}
100% {
-o-transform: rotate(-540deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-3 {
0% {
-ms-transform: rotate(-180deg) translate(49px);
}
16% {
-ms-transform: rotate(-180deg) translate(49px);
}
33% {
-ms-transform: rotate(-360deg) translate(49px);
}
35% {
-ms-transform: rotate(-384deg) translate(49px);
}
37% {
-ms-transform: rotate(-360deg) translate(49px);
}
66% {
-ms-transform: rotate(-360deg) translate(49px);
}
83% {
-ms-transform: rotate(-540deg) translate(49px);
}
85% {
-ms-transform: rotate(-564deg) translate(49px);
}
87% {
-ms-transform: rotate(-540deg) translate(49px);
}
100% {
-ms-transform: rotate(-540deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-3 {
0% {
-webkit-transform: rotate(-180deg) translate(49px);
}
16% {
-webkit-transform: rotate(-180deg) translate(49px);
}
33% {
-webkit-transform: rotate(-360deg) translate(49px);
}
35% {
-webkit-transform: rotate(-384deg) translate(49px);
}
37% {
-webkit-transform: rotate(-360deg) translate(49px);
}
66% {
-webkit-transform: rotate(-360deg) translate(49px);
}
83% {
-webkit-transform: rotate(-540deg) translate(49px);
}
85% {
-webkit-transform: rotate(-564deg) translate(49px);
}
87% {
-webkit-transform: rotate(-540deg) translate(49px);
}
100% {
-webkit-transform: rotate(-540deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-3 {
0% {
-moz-transform: rotate(-180deg) translate(49px);
}
16% {
-moz-transform: rotate(-180deg) translate(49px);
}
33% {
-moz-transform: rotate(-360deg) translate(49px);
}
35% {
-moz-transform: rotate(-384deg) translate(49px);
}
37% {
-moz-transform: rotate(-360deg) translate(49px);
}
66% {
-moz-transform: rotate(-360deg) translate(49px);
}
83% {
-moz-transform: rotate(-540deg) translate(49px);
}
85% {
-moz-transform: rotate(-564deg) translate(49px);
}
87% {
-moz-transform: rotate(-540deg) translate(49px);
}
100% {
-moz-transform: rotate(-540deg) translate(49px);
}
}
@keyframes cssload-anim-4 {
0% {
transform: rotate(0deg) translate(49px);
}
16% {
transform: rotate(0deg) translate(49px);
}
33% {
transform: rotate(-180deg) translate(49px);
}
35% {
transform: rotate(-204deg) translate(49px);
}
37% {
transform: rotate(-180deg) translate(49px);
}
66% {
transform: rotate(-180deg) translate(49px);
}
83% {
transform: rotate(-360deg) translate(49px);
}
85% {
transform: rotate(-384deg) translate(49px);
}
87% {
transform: rotate(-360deg) translate(49px);
}
100% {
transform: rotate(-360deg) translate(49px);
}
}
@-o-keyframes cssload-anim-4 {
0% {
-o-transform: rotate(0deg) translate(49px);
}
16% {
-o-transform: rotate(0deg) translate(49px);
}
33% {
-o-transform: rotate(-180deg) translate(49px);
}
35% {
-o-transform: rotate(-204deg) translate(49px);
}
37% {
-o-transform: rotate(-180deg) translate(49px);
}
66% {
-o-transform: rotate(-180deg) translate(49px);
}
83% {
-o-transform: rotate(-360deg) translate(49px);
}
85% {
-o-transform: rotate(-384deg) translate(49px);
}
87% {
-o-transform: rotate(-360deg) translate(49px);
}
100% {
-o-transform: rotate(-360deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-4 {
0% {
-ms-transform: rotate(0deg) translate(49px);
}
16% {
-ms-transform: rotate(0deg) translate(49px);
}
33% {
-ms-transform: rotate(-180deg) translate(49px);
}
35% {
-ms-transform: rotate(-204deg) translate(49px);
}
37% {
-ms-transform: rotate(-180deg) translate(49px);
}
66% {
-ms-transform: rotate(-180deg) translate(49px);
}
83% {
-ms-transform: rotate(-360deg) translate(49px);
}
85% {
-ms-transform: rotate(-384deg) translate(49px);
}
87% {
-ms-transform: rotate(-360deg) translate(49px);
}
100% {
-ms-transform: rotate(-360deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-4 {
0% {
-webkit-transform: rotate(0deg) translate(49px);
}
16% {
-webkit-transform: rotate(0deg) translate(49px);
}
33% {
-webkit-transform: rotate(-180deg) translate(49px);
}
35% {
-webkit-transform: rotate(-204deg) translate(49px);
}
37% {
-webkit-transform: rotate(-180deg) translate(49px);
}
66% {
-webkit-transform: rotate(-180deg) translate(49px);
}
83% {
-webkit-transform: rotate(-360deg) translate(49px);
}
85% {
-webkit-transform: rotate(-384deg) translate(49px);
}
87% {
-webkit-transform: rotate(-360deg) translate(49px);
}
100% {
-webkit-transform: rotate(-360deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-4 {
0% {
-moz-transform: rotate(0deg) translate(49px);
}
16% {
-moz-transform: rotate(0deg) translate(49px);
}
33% {
-moz-transform: rotate(-180deg) translate(49px);
}
35% {
-moz-transform: rotate(-204deg) translate(49px);
}
37% {
-moz-transform: rotate(-180deg) translate(49px);
}
66% {
-moz-transform: rotate(-180deg) translate(49px);
}
83% {
-moz-transform: rotate(-360deg) translate(49px);
}
85% {
-moz-transform: rotate(-384deg) translate(49px);
}
87% {
-moz-transform: rotate(-360deg) translate(49px);
}
100% {
-moz-transform: rotate(-360deg) translate(49px);
}
}
@keyframes cssload-anim-5 {
0% {
transform: rotate(-180deg) translate(49px);
}
16% {
transform: rotate(-180deg) translate(49px);
}
33% {
transform: rotate(-180deg) translate(49px);
}
66% {
transform: rotate(180deg) translate(49px);
}
68% {
transform: rotate(204deg) translate(49px);
}
70% {
transform: rotate(180deg) translate(49px);
}
100% {
transform: rotate(180deg) translate(49px);
}
}
@-o-keyframes cssload-anim-5 {
0% {
-o-transform: rotate(-180deg) translate(49px);
}
16% {
-o-transform: rotate(-180deg) translate(49px);
}
33% {
-o-transform: rotate(-180deg) translate(49px);
}
66% {
-o-transform: rotate(180deg) translate(49px);
}
68% {
-o-transform: rotate(204deg) translate(49px);
}
70% {
-o-transform: rotate(180deg) translate(49px);
}
100% {
-o-transform: rotate(180deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-5 {
0% {
-ms-transform: rotate(-180deg) translate(49px);
}
16% {
-ms-transform: rotate(-180deg) translate(49px);
}
33% {
-ms-transform: rotate(-180deg) translate(49px);
}
66% {
-ms-transform: rotate(180deg) translate(49px);
}
68% {
-ms-transform: rotate(204deg) translate(49px);
}
70% {
-ms-transform: rotate(180deg) translate(49px);
}
100% {
-ms-transform: rotate(180deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-5 {
0% {
-webkit-transform: rotate(-180deg) translate(49px);
}
16% {
-webkit-transform: rotate(-180deg) translate(49px);
}
33% {
-webkit-transform: rotate(-180deg) translate(49px);
}
66% {
-webkit-transform: rotate(180deg) translate(49px);
}
68% {
-webkit-transform: rotate(204deg) translate(49px);
}
70% {
-webkit-transform: rotate(180deg) translate(49px);
}
100% {
-webkit-transform: rotate(180deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-5 {
0% {
-moz-transform: rotate(-180deg) translate(49px);
}
16% {
-moz-transform: rotate(-180deg) translate(49px);
}
33% {
-moz-transform: rotate(-180deg) translate(49px);
}
66% {
-moz-transform: rotate(180deg) translate(49px);
}
68% {
-moz-transform: rotate(204deg) translate(49px);
}
70% {
-moz-transform: rotate(180deg) translate(49px);
}
100% {
-moz-transform: rotate(180deg) translate(49px);
}
}
@keyframes cssload-anim-6 {
0% {
transform: rotate(0deg) translate(49px);
}
16% {
transform: rotate(180deg) translate(49px);
}
18% {
transform: rotate(204deg) translate(49px);
}
20% {
transform: rotate(180deg) translate(49px);
}
33% {
transform: rotate(180deg) translate(49px);
}
66% {
transform: rotate(180deg) translate(49px);
}
83% {
transform: rotate(180deg) translate(49px);
}
100% {
transform: rotate(360deg) translate(49px);
}
}
@-o-keyframes cssload-anim-6 {
0% {
-o-transform: rotate(0deg) translate(49px);
}
16% {
-o-transform: rotate(180deg) translate(49px);
}
18% {
-o-transform: rotate(204deg) translate(49px);
}
20% {
-o-transform: rotate(180deg) translate(49px);
}
33% {
-o-transform: rotate(180deg) translate(49px);
}
66% {
-o-transform: rotate(180deg) translate(49px);
}
83% {
-o-transform: rotate(180deg) translate(49px);
}
100% {
-o-transform: rotate(360deg) translate(49px);
}
}
@-ms-keyframes cssload-anim-6 {
0% {
-ms-transform: rotate(0deg) translate(49px);
}
16% {
-ms-transform: rotate(180deg) translate(49px);
}
18% {
-ms-transform: rotate(204deg) translate(49px);
}
20% {
-ms-transform: rotate(180deg) translate(49px);
}
33% {
-ms-transform: rotate(180deg) translate(49px);
}
66% {
-ms-transform: rotate(180deg) translate(49px);
}
83% {
-ms-transform: rotate(180deg) translate(49px);
}
100% {
-ms-transform: rotate(360deg) translate(49px);
}
}
@-webkit-keyframes cssload-anim-6 {
0% {
-webkit-transform: rotate(0deg) translate(49px);
}
16% {
-webkit-transform: rotate(180deg) translate(49px);
}
18% {
-webkit-transform: rotate(204deg) translate(49px);
}
20% {
-webkit-transform: rotate(180deg) translate(49px);
}
33% {
-webkit-transform: rotate(180deg) translate(49px);
}
66% {
-webkit-transform: rotate(180deg) translate(49px);
}
83% {
-webkit-transform: rotate(180deg) translate(49px);
}
100% {
-webkit-transform: rotate(360deg) translate(49px);
}
}
@-moz-keyframes cssload-anim-6 {
0% {
-moz-transform: rotate(0deg) translate(49px);
}
16% {
-moz-transform: rotate(180deg) translate(49px);
}
18% {
-moz-transform: rotate(204deg) translate(49px);
}
20% {
-moz-transform: rotate(180deg) translate(49px);
}
33% {
-moz-transform: rotate(180deg) translate(49px);
}
66% {
-moz-transform: rotate(180deg) translate(49px);
}
83% {
-moz-transform: rotate(180deg) translate(49px);
}
100% {
-moz-transform: rotate(360deg) translate(49px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.