这是一款简单的CSS3圆形进度条动画特效。该圆形进度条特效采用bootstrap网格系统进行布局,并通过CSS3代码来完成圆形进度条的动画效果。
使用方法
在页面中引入bootstrap.min.css文件。
HTML结构
圆形进度条的基本HTML结构如下:
90%
CSS代码
圆形进度条的基本样式如下:
.progress{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
heig