第一种

HTML

<ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>

CSS

ul#progress {
    list-style: none;
    width: 125px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

ul#progress li {
    /* Style your list */
	float: left;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-left: 10px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #000;
}

ul#progress li:first-child {
    margin-left: 0;
} /* Remove the margin first li element */

.ball {
    /* Style your ball and set the animation */
	background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 15px;
    height: 15px;
    border-radius: 50px;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -moz-animation: loading 1s linear forwards;
    -webkit-animation: loading 1s linear forwards;
}

.pulse {
    /* Style your second ball to create the amazing effects */
	width: 15px;
    height: 15px;
    border-radius: 30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position: absolute;
    top: -1px;
    left: -1px;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -webkit-animation: pulse 1s ease-out;
    -moz-animation: pulse 1s ease-out;
}

/* Control Layers */
#layer1 {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

#layer2 {
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

#layer3 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

#layer4 {
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

#layer5 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

#layer7 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

#layer8 {
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

#layer9 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

#layer10 {
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
}

#layer11 {
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}

@-moz-keyframes loading {
    0% {
        -moz-transform: scale(0,0);
    }

    100% {
        -moz-transform: scale(1,1);
    };
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(0,0);
    }

    100% {
        -webkit-transform: scale(1,1);
    };
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }

    10% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -moz-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -moz-transform: scale(0);
        opacity: 0;
    };
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    10% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0);
        opacity: 0;
    };
}

第二种

HTML

<div id="content">
<span class="expand"></span>
</div>

CSS

#content {
    width: 100%;
    /* Full Width */
	height: 5px;
    margin: 50px auto;
    background: #000;
}

.expand {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation: fullexpand 10s ease-out;
    -webkit-animation: fullexpand 10s ease-out;
}

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width: 0px;
}

100% {
    width: 100%;
}	
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

第三种

HTML

<ul id="loadbar">
    <li>
    <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </li>
    <li>
    <div id="layerFill2" class="bar"></div>
    </li>
    <li>
    <div id="layerFill3" class="bar"></div>
    </li>
    <li>
    <div id="layerFill4" class="bar"></div>
    </li>
    <li>
    <div id="layerFill5" class="bar"></div>
    </li>
    <li>
    <div id="layerFill6" class="bar"></div>
    </li>
    <li>
    <div id="layerFill7" class="bar"></div>
    </li>
    <li>
    <div id="layerFill8" class="bar"></div>
    </li>
    <li>
    <div id="layerFill9" class="bar"></div>
    </li>
    <li>
    <div id="layerFill10" class="bar"></div>
    </li>
</ul>

CSS

ul#loadbar {
    list-style: none;
    width: 140px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 75px;
}

ul#loadbar li {
    float: left;
    position: relative;
    width: 11px;
    height: 26px;
    margin-left: 1px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #000;
}

ul#loadbar li:first-child {
    margin-left: 0;
}

.bar {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    width: 11px;
    height: 26px;
    opacity: 0;
    -webkit-animation: fill .5s linear forwards;
    -moz-animation: fill .5s linear forwards;
}

#layerFill1 {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

#layerFill2 {
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

#layerFill3 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

#layerFill4 {
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

#layerFill5 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

#layerFill6 {
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
}

#layerFill7 {
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}

#layerFill8 {
    -moz-animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

#layerFill9 {
    -moz-animation-delay: 4.5s;
    -webkit-animation-delay: 4.5s;
}

#layerFill10 {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

@-moz-keyframes fill {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    };
}

@-webkit-keyframes fill {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    };
}
" /> 加载动画 · 任刚 · Ren Gang - 我的设计笔记

加载动画    72

CSS3 Loading Animation – CSS加载动画

插件      

CanvasLoader Creator – 加载动画在线生成器

工具      

Flickr Style Loading Animation Using JQuery – Flickr风格加载动画(Jquery)

插件      

Ajax Style Loading Animation in CSS3 ( no Images ) – 无须图片CSS3的Ajax风格Loading加载动画

插件      

CSS3 Loading Spinners Without Images – 无须图片CSS旋转加载插件

插件      

Bouncy Animated Loading Animation - 纯CSS3加载动画 Loading插件

Bouncy Animated Loading Animation – 纯CSS3加载动画 Loading插件

插件      

Sonic – looping loaders - 循环加载动画插件

Sonic – looping loaders – 循环加载动画插件

插件      

登 录 注 册