- A+
所属分类：Web前端
摘要：圆环进度条被应用于各个场景，比如我们可以用来表示加载进度等。通常我们可以用 css3 的动画去实现。
详解 css3 实现圆环进度条
简单的画一个圆环，我们都知道如何使用 css 画一个圆环。（利用border属性、border-radius属性）
HTML 代码：
<div class="circle></div>
CSS 代码：
.circle{ width:160px; height:160px; border:20px solid red; border-radius:50%; }
实现圆环进度条属性，我们利用 css 画扇形，然后结合 css3 的动画属性去实现。结合代码去讲解：
HTML代码：
<div class="circle-progress"> <div class="content left"> <div class="circle left-circle"></div> </div> <div class="content right"> <div class="circle right-circle"></div> </div> </div>
首先确定圆环进度条最外层 css 的属性：
.circle-progress { position: relative; width: 200px; height: 200px; border: 1px solid #888; /*可选属性,仅供测试使用*/ }
然后定位 content 以及 left 和 right 的属性值：
.content { position: absolute; top: 0; width: 100px; height: 200px; margin: 0; padding: 0; overflow: hidden; } .left { left: 0; } .right { right: 0; }
最后确定 left-circle 和 right-circle 属性：
.circle { position: absolute; margin: 0; width: 160px; height: 160px; border-radius: 50%; border: 20px solid transparent; transform: rotate(135deg); } .left-circle { left: 0; border-top-color: green; border-left-color: green; animation: circle-left 5s linear infinite; } .right-circle { right: 0; border-bottom-color: green; border-right-color: green; animation: circle-right 5s linear infinite; }
动画 css3 代码：
@keyframes circle-right { 0% { transform: rotate(135deg); } 50%, 100% { transform: rotate(315deg); } } @keyframes circle-left { 0%, 50% { transform: rotate(135deg); } 100% { transform: rotate(315deg); } }
完整的代码：
<!DOCTYPE html> <html> <head> <title>圆环进度条</title> <meta charset="utf-8" name="viewport" content="width=device-width;initial-scale=1.0" /> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; } .circle-progress { position: relative; width: 200px; height: 200px; border: 1px solid #888; } .content { position: absolute; top: 0; width: 100px; height: 200px; margin: 0; padding: 0; overflow: hidden; } .left { left: 0; } .right { right: 0; } .circle { position: absolute; margin: 0; width: 160px; height: 160px; border-radius: 50%; border: 20px solid transparent; transform: rotate(135deg); } .left-circle { left: 0; border-top-color: green; border-left-color: green; animation: circle-left 5s linear infinite; } .right-circle { right: 0; border-bottom-color: green; border-right-color: green; animation: circle-right 5s linear infinite; } @keyframes circle-right { 0% { transform: rotate(135deg); } 50%, 100% { transform: rotate(315deg); } } @keyframes circle-left { 0%, 50% { transform: rotate(135deg); } 100% { transform: rotate(315deg); } } </style> </head> <body> <div class="circle-progress"> <div class="content left"> <div class="circle left-circle"></div> </div> <div class="content right"> <div class="circle right-circle"></div> </div> </div> </body> </html>
