w3ctech

通过CSS3实现win8的Loading效果

demo:http://jsbin.com/hacadobo/1/edit

code:https://gist.github.com/hoosin/ff27ca3e1c0926c0054b

<div class="loading-msg">
    数据加载中请稍后
    <div class="loading-box">
        <div class="loading" index="0"></div>
        <div class="loading" index="1"></div>
        <div class="loading" index="2"></div>
        <div class="loading" index="3"></div>
        <div class="loading" index="4"></div>
    </div>
</div>
.loading-msg{color: red; font:normal 24px/50px "Microsoft YaHei"; text-align: center; background: #fff; width: 1000px; margin: 0 auto; }

.loading-box{position:relative; padding: 10px 5px 30px 5px; }

 @keyframes loading {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes loading {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@-moz-keyframes loading {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@-o-keyframes loading {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.loading {
    width: 5px;
    height: 5px;
    background: red;
    position: absolute;
    opacity: 0;
    animation: loading 2s;
    -moz-animation: loading 2s;
    -webkit-animation: loading 2s;
    -o-animation: loading 2s;
    animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.loading[index="0"] {
    animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}

.loading[index="1"] {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

.loading[index="2"] {
    animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
}

.loading[index="3"] {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.loading[index="4"] {
    animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
}
w3ctech微信

扫码关注w3ctech微信公众号

共收到5条回复

  • 哈哈,分类错了。

    你能把代码贴过来,在加一个链接地址吗?

    这样更直接,怕到时候git打不开。

    回复此楼
  • 真牛逼

    回复此楼
  • = =给文件名加后缀吧,不然连个高亮都没有

    回复此楼
  • 好东西..能用上.

    回复此楼
  • .loading-box加一个overflow:hidden比较好,不然色块移出屏幕时滚动条会闪烁。

    回复此楼