前两天面试，让我现场用css3做一个圆环加载的进度条，没写出来，尴尬了。抽空参考了些网上的例子，做了下面这个demo。
效果图：
当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-b
最低0.47元/天 解锁文章
扫一扫
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
