按钮加一个类名自动变菊花loading状态无图片版

2017-03-04 11:55

按钮加一个类名自动变菊花loading状态无图片版，使用便捷，效果好，开销小，CSS3动画旋转，IE10+和其它现代浏览器支持

相关文章：暂无

完整代码

/* 按钮loading */
a[class*=-btn].loading, 
label[class*=-btn].loading {
    position: relative;
}
a[class*=-btn].loading::first-line, 
label[class*=-btn].loading::first-line {
    color: transparent;
}
a[class*=-btn].loading::before, 
label[class*=-btn].loading::before {
    width: 4px; height: 4px;
    margin: auto;
    content: '';
    -webkit-animation: spinZoom 1s steps(8) infinite;
    animation: spinZoom 1s steps(8) infinite;
    border-radius: 100%;
    box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;
    /* center */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
/* loading动画 */
@-webkit-keyframes spinZoom {
    0% {
        -webkit-transform: scale(.75) rotate(0);
    }
    100% {
        -webkit-transform: scale(.75) rotate(360deg);
    }
}
@keyframes spinZoom {
    0% {
        transform: scale(.75) rotate(0);
    }
    100% {
        transform: scale(.75) rotate(360deg);
    }
}

标签：CSS

分享：新浪微博