xiaobin's studio

css 加载中的动态圆点图

字数统计: 156阅读时长: 1 min
2015/10/24 Share

很多时候再页面加载过程中的话都需要用个动画来展现Loading,记得是在一个网站上看到的就用几个div实现加载过程中的动画。可以将加载完成的部分覆盖在加载动画上面就可以了。

css代码实现

.spinner div {

    1. width: 20px;
    2. height: 20px;
    3. position: absolute;
    4. left: -40px;
    5. bottom: 10px;
    6. background-color: #333;
    7. border-radius: 50%;
    8. -webkit-animation: move 2s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
    9. animation: move 2s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
    10. /* -webkit-transform: translateZ(0); */
    11. -ms-transform: translateZ(0);
    12. /* transform: translateZ(0); */

}

实现过程截图

加载过程截图

原文作者:小镔

原文链接:http://www.shaoxiaobin.com/2015/10/24/2015-10-24css 加载中的动态圆点图/

发表日期:October 24th 2015, 9:00:00 am

更新日期:January 10th 2019, 11:10:46 pm

版权声明:非商业用途,转载请注明出处:邵小镔 http://www.shaoxiaobin.com

CATALOG
  1. 1. css代码实现
  2. 2. 实现过程截图