之前小编为大家介绍了一款基于jquery带百分比的响应式进度加载条。今天为大家再带来一款基于prefixfree.js的进度加载条。这款加载条没有加载的百分比。界面还是挺好看的。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

<div id="wrapper">
        <div id="loaderSkeleton">
            <div id="loader">
            </div>
        </div>
        <span>Loading . . .</span>
    </div>

css代码：

     body {
  background: #222;
  overflow:hidden;
}
#wrapper{
  width: 13%;
  margin: 200px auto;
}
#loaderSkeleton {
  width: 175px;
  height: 25px;
  border: 1px solid #f08080;
  animation: turn 4s linear 1.75s infinite;
}
#loader {
  width: 0%;
  height: 100%;
  background: #f08080;
  box-shadow: 10px 0px 15px 0px rgba(240,128,128,1);
  animation: load 2s linear infinite;
}
@keyframes load {
  0%{width: 0%;}
  87.5%, 100%{width:100%;}
}
@keyframes turn{
  0%{transform: rotateY(0deg);}
  6.25%, 50%{transform: rotateY(180deg);}
  56.25%, 100%{transform: rotateY(360deg);}
}
#wrapper span{
  display: inline-block;
  line-height: 30px;
  color: #f08080;
  font-size: 1.5em;
  animation: bounce 2s  linear infinite;
}
@keyframes bounce{
  0%{line-height: 30px;}
  12.5%{line-height: 70px;}
  72.5%,100%{line-height: 30px;}
}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8809

在线预览    源码下载