Question

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

Answer 1

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;
}

运行效果：

Answer 2

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

<div class="content"></div>
</body>