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

html-css09

css3 圆圈怎么加载数据从1%-100%,第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

}

运行效果：

css已设置width100% 宽度没有占满浏览器是设置错误造成的，解决方法为：

1、首先需要新建一个html文件，命名为test.html。

2、接下来在test.html文件内，使用div创建一个模块，下面将对该div进行样式设置。

3、然后在test.html文件内，给div添加一个class属性，主要用于在css标签中设置它的样式。

4、在css标签中，使用width属性设置div的宽度，设置width100%即可。