重构类似youtube、Medium的loading加载功能

2013-09-10 00:59 ·Ab叔 1136 3 <- 点击左侧的数字“攒”一个吧

前段时间看到Medium的loading加载条,非常新颖,也非常的友好,所以我rebuild了一下这个功能。这个是css3实现的,过几天会另一种方式实现这个功能,请持续关注。

View demo      Download

HTML:

<body>
	<div class="loading-bar"></div>
</body>

CSS:

@-webkit-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-moz-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-o-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }
}
.loading-bar{
	position:fixed;
	display:none;
	top:0;
	left:0;
	right:0;
	height:2px;
	z-index:800;
	background:#60d778;
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-o-transform:translateX(100%);
	transform:translateX(100%)}.app-loading .loading-bar{display:block;
	-webkit-animation:shift-rightwards 1s ease-in-out infinite;
	-moz-animation:shift-rightwards 1s ease-in-out infinite;
	-ms-animation:shift-rightwards 1s ease-in-out infinite;
	-o-animation:shift-rightwards 1s ease-in-out infinite;
	animation:shift-rightwards 1s ease-in-out infinite;
	-webkit-animation-delay:.4s;
	-moz-animation-delay:.4s;
	-o-animation-delay:.4s;
	animation-delay:.4s;
}