azhsetiawan
6/12/2013 - 12:45 AM

CSS for spin loading

CSS for spin loading

/* 
 * Do we need box-shadow or border-radius prefixes anymore? 
 * http://css-tricks.com/do-we-need-box-shadow-prefixes/ 
 */

#spin-loading {
    width: 160px;
    height: 160px;
    border-radius: 80px;
    -webkit-animation: rotate 6s infinite linear;
    -moz-animation: rotate 6s infinite linear;
    -ms-animation: rotate 6s infinite linear;
    -o-animation: rotate 6s infinite linear;
    animation: rotate 6s infinite linear;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -ms-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

/* animation */
@-webkit-keyframes fullrotate {
    0%      { -webkit-transform: rotate(0deg); }
    100%    { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes fullrotate {
    0%      { -moz-transform: rotate(0deg); }
    100%    { -moz-transform: rotate(360deg); }
}
@-ms-keyframes fullrotate {
    0%      { -ms-transform: rotate(0deg); }
    100%    { -ms-transform: rotate(360deg); }
}
@-o-keyframes fullrotate {
    0%      { -o-transform: rotate(0deg); }
    100%    { -o-transform: rotate(360deg); }
}
@keyframes fullrotate {
    0%      { transform: rotate(0deg); }
    100%    { transform: rotate(360deg); }
}