css3 圆圈怎么加载数据从1-100

css3 圆圈怎么加载数据从1-100

<style type="text/css">
.content{
width:100px;
height:100px;
border-radius:100px;
border:1px solid #f00;
}
</style>

<div class="content"></div>
</body>2015-02-26

HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
<div class="wrapper"> <div class="load-bar"> <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div> </div> <h1>Loading</h1> <p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p></div>
CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {height: 99%;width: 0%;border-radius: inherit;position: relative;background: #c2d7ac;background: linear-gradient(#e0f6c8, #98ad84);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);animation: loader 10s linear infinite;}
运行效果：

2016-02-24