.la-ball-clip-rotate {
position: relative;
}
.la-ball-clip-rotate > div {
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: #fff;
background: #fff;
border-color: #fff;
border-style: solid;
border-width: 0;
}
.la-ball-clip-rotate:after {
display: table;
clear: both;
line-height: 0;
content: "";
}
.la-ball-clip-rotate.la-dark > div {
color: #333;
background: #333;
border-color: #333;
} @-webkit-keyframes ball-clip-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes ball-clip-rotate {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes ball-clip-rotate {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes ball-clip-rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.la-ball-clip-rotate {
position: absolute;
left: 50%;
top: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
}
.la-ball-clip-rotate > div {
display: inline-block;
float: left;
width: 28px;
height: 28px;
margin: 0;
background: transparent !important;
border-style: solid;
border-width: 2px;
border-bottom-color: transparent !important;
border-radius: 100%;
-webkit-animation: ball-clip-rotate .75s linear infinite;
-moz-animation: ball-clip-rotate .75s linear infinite;
-o-animation: ball-clip-rotate .75s linear infinite;
animation: ball-clip-rotate .75s linear infinite;
}
.la-ball-clip-rotate.la-sm {
width: 16px;
height: 16px;
}
.la-ball-clip-rotate.la-sm > div {
width: 14px;
height: 14px;
margin: 0;
border-width: 1px;
}
.la-ball-clip-rotate.la-lg {
width: 48px;
height: 48px;
}
.la-ball-clip-rotate.la-lg > div {
width: 42px;
height: 42px;
margin: 0;
border-width: 3px;
}
.la-ball-clip-rotate.la-2x {
width: 64px;
height: 64px;
}
.la-ball-clip-rotate.la-2x > div {
width: 56px;
height: 56px;
margin: 0;
border-width: 4px;
}