圆形进度Circle Progress Bar

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Circle Progress Bar</title> <style type="text/css"> * { box-sizing: border-box; } body { font-family: Roboto; background-color: #e7e7e7; color: #555; line-height: 1.4; } .container { width: 70%; padding: 2rem; margin: 100px auto; background-color: white; } .container h1 { text-align: center; } .progress--circle { position: relative; display: inline-block; margin: 1rem; width: 120px; height: 120px; border-radius: 50%; background-color: #ddd; } .progress--circle:before { content: ''; position: absolute; top: 15px; left: 15px; width: 90px; height: 90px; border-radius: 50%; background-color: white; } .progress--circle:after { content: ''; display: inline-block; width: 100%; height: 100%; border-radius: 50%; background-color: #63B8FF; } .progress__number { position: absolute; top: 50%; width: 100%; line-height: 1; margin-top: -0.75rem; text-align: center; font-size: 1.5rem; color: #777; } .progress--bar.progress--0:after { width: 0%; } .progress--circle.progress--0:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(90deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--5:after { width: 5%; } .progress--circle.progress--5:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(108deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--10:after { width: 10%; } .progress--circle.progress--10:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(126deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--15:after { width: 15%; } .progress--circle.progress--15:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(144deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--20:after { width: 20%; } .progress--circle.progress--20:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(162deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--25:after { width: 25%; } .progress--circle.progress--25:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(180deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--30:after { width: 30%; } .progress--circle.progress--30:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(198deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--35:after { width: 35%; } .progress--circle.progress--35:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(216deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--40:after { width: 40%; } .progress--circle.progress--40:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(234deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--45:after { width: 45%; } .progress--circle.progress--45:after { background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(252deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--50:after { width: 50%; } .progress--circle.progress--50:after { background-image: linear-gradient(-90deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--55:after { width: 55%; } .progress--circle.progress--55:after { background-image: linear-gradient(-72deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--60:after { width: 60%; } .progress--circle.progress--60:after { background-image: linear-gradient(-54deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--65:after { width: 65%; } .progress--circle.progress--65:after { background-image: linear-gradient(-36deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--70:after { width: 70%; } .progress--circle.progress--70:after { background-image: linear-gradient(-18deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--75:after { width: 75%; } .progress--circle.progress--75:after { background-image: linear-gradient(0deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--80:after { width: 80%; } .progress--circle.progress--80:after { background-image: linear-gradient(18deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--85:after { width: 85%; } .progress--circle.progress--85:after { background-image: linear-gradient(36deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--90:after { width: 90%; } .progress--circle.progress--90:after { background-image: linear-gradient(54deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--95:after { width: 95%; } .progress--circle.progress--95:after { background-image: linear-gradient(72deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } .progress--bar.progress--100:after { width: 100%; } .progress--circle.progress--100:after { background-image: linear-gradient(90deg, #63B8FF 50%, transparent 50%, transparent), linear-gradient(270deg, #63B8FF 50%, #ddd 50%, #ddd); } </style> </head> <body> <div class="container"> <h2>Circles</h2> <div class="progress--circle progress--25"> <div class="progress__number">25%</div> </div> <div class="progress--circle progress--50"> <div class="progress__number">50%</div> </div> <div class="progress--circle progress--75"> <div class="progress__number">75%</div> </div> <div class="progress--circle progress--100"> <div class="progress__number">100%</div> </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Circular minimal countdown</title> <style type="text/css"> html { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYmRjMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTNjOWIzIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjbGVzc2hhdC1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==); background-image: -webkit-linear-gradient(-45deg, #4ebdc0, #53c9b3); background-image: -moz-linear-gradient(-45deg, #4ebdc0, #53c9b3); background-image: -o-linear-gradient(-45deg, #4ebdc0, #53c9b3); background-image: linear-gradient(135deg, #4ebdc0, #53c9b3); height: 100%; } body { min-height: 100%; position: relative; text-align: center; padding-top: 100px; color: #E7F7F5; font-family: 'Helvetica Neue', 'Arial'; font-weight: 100; letter-spacing: 1px; line-height: 1; } ul { margin-bottom: 4em; } .chart { display: inline-block; width: 95px; height: 95px; margin: 0 10px; vertical-align: top; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 22px; } .chart span { display: block; font-size: 2em; font-weight: normal; } .chart canvas { position: absolute; left: 0; top: 0; } </style> </head> <body> <ul> <li class="chart" data-percent="75"><span>36</span>Jours</li> <li class="chart" data-percent="15"><span>15</span>Heures</li> <li class="chart" data-percent="83"><span>50</span>Minutes</li> </ul> <script type="text/javascript"> /**! * easyPieChart * Lightweight plugin to render simple, animated and retina optimized pie charts * * @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de) * @version 2.0.1 **/ !function(){var a=function(a,b){var c=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(c);var d=c.getContext("2d");if(c.width=c.height=b.size,a.appendChild(c),window.devicePixelRatio>1){var e=window.devicePixelRatio;c.style.width=c.style.height=[b.size,"px"].join(""),c.width=c.height=b.size*e,d.scale(e,e)}d.translate(b.size/2,b.size/2),d.rotate((-0.5+b.rotate/180)*Math.PI);var f=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(f-=b.scaleLength+2);var g=function(a,b,c){c=Math.min(Math.max(0,c||1),1),d.beginPath(),d.arc(0,0,f,0,2*Math.PI*c,!1),d.strokeStyle=a,d.lineWidth=b,d.stroke()},h=function(){var a,c,e=24;d.lineWidth=1,d.fillStyle=b.scaleColor,d.save();for(var e=24;e>=0;--e)0===e%6?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),d.fillRect(-b.size/2+a,0,c,1),d.rotate(Math.PI/12);d.restore()};Date.now=Date.now||function(){return+new Date};var i=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();this.clear=function(){d.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){this.clear(),b.scaleColor&&h(),b.trackColor&&g(b.trackColor,b.lineWidth),d.lineCap=b.lineCap;var c;c="function"==typeof b.barColor?b.barColor(a):b.barColor,a>0&&g(c,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate),g=b.easing(this,f,a,c-a,b.animate);this.draw(g),b.onStep(a,c,g),f>=b.animate?b.onStop(a,c):i(e)}.bind(this);i(e)}.bind(this)},b=function(b,c){var d,e={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:1e3,renderer:a,easing:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}},f={},g=0,h=function(){this.el=b,this.options=f;for(var a in e)e.hasOwnProperty(a)&&(f[a]=c&&"undefined"!=typeof c[a]?c[a]:e[a],"function"==typeof f[a]&&(f[a]=f[a].bind(this)));f.easing="string"==typeof f.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[f.easing])?jQuery.easing[f.easing]:e.easing,d=new f.renderer(b,f),d.draw(g),b.dataset&&b.dataset.percent&&this.update(parseInt(b.dataset.percent,10))}.bind(this);this.update=function(a){return a=parseInt(a,10),f.animate?d.animate(g,a):d.draw(a),g=a,this}.bind(this),h()};window.EasyPieChart=b}(); var options = { scaleColor: false, trackColor: 'rgba(255,255,255,0.3)', barColor: '#E7F7F5', lineWidth: 6, lineCap: 'butt', size: 95 }; window.addEventListener('DOMContentLoaded', function() { var charts = []; [].forEach.call(document.querySelectorAll('.chart'), function(el) { charts.push(new EasyPieChart(el, options)); }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 圆形进度Circle Progress Bar