循环百分比进度条
我想在我的网站上有百分比指标：
在这种情况下，它显示了75％。 这应该怎么做？ 我有一个图像文件中的黄色圆圈，但如果它更容易，一些如何做，所有使用CSS，这对我来说没关系。
考虑进度条的形状（四舍五入结束/开始），我会build议使用SVG。
演示： 径向进度条
在以下示例中，使用stroke-dasarray属性对进度进行animation处理，并使用jQuery将％数字递增：
var count = $(('#count')); $({ Counter: 0 }).animate({ Counter: count.text() }, { duration: 5000, easing: 'linear', step: function () { count.text(Math.ceil(this.Counter)+ "%"); } });
body{text-align:center;font-family: 'Open Sans', sans-serif;} svg{width:30%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg id="animated" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="45" fill="#FDB900"/> <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff" stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"> <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/> </path> <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text> </svg>
纯粹的HTML / CSS解决scheme
简而言之，我使用CSS border-radius和z-index属性创build一个橙色中心圆和橙色外圈下面的白色半圆。 最初，半圆完全隐藏在左侧的一层额外的橙色背后，但其外边缘随着围绕中心轴旋转而逐渐显露（通过CSS transform: rotate() ），创build一个进度的外观酒吧。 一旦进度条通过中点，需要额外的欺骗（详情请参阅下面的代码段）。
所有这些都是用纯HTML和CSS完成的，除了使用JavaScript的animation。 它似乎需要比基于SVG的解决scheme更多的代码，但标记实际上要简单得多，这使得我认为它是一个很好的select。
function setProgress(elem, percent) { var degrees = percent * 3.6, transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform'; elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent)); elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)'; elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)'; if(percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className)) elem.className += ' fiftyPlus'; } (function() { var elem = document.querySelector('.circlePercent'), percent = 0; (function animate() { setProgress(elem, (percent += .25)); if(percent < 100) setTimeout(animate, 15); })(); })();
.circlePercent { position: relative; top: 26px; left: 26px; width: 96px; height: 96px; border-radius: 50%; background: orange; } .circlePercent:before, .circlePercent > .progressEnd { position: absolute; z-index: 3; top: 2px; left: 45px; width: 6px; height: 6px; border-radius: 50%; background: white; -ms-transform-origin: 3px 46px; transform-origin: 3px 46px; content: ""; } .circlePercent:after, .circlePercent > .progress { position: absolute; -ms-transform-origin: 48px 48px; transform-origin: 48px 48px; z-index: 0; top: 0; left: 0; width: 48px; height: 96px; border-radius: 48px 0 0 48px; background: orange; content: ""; } .circlePercent.fiftyPlus:after { background: white; -ms-transform: rotate(180deg); transform: rotate(180deg); } .circlePercent > .progress.progress { background: white; } .circlePercent > .counter { position: absolute; box-sizing: border-box; z-index: 2; width: 100px; height: 100px; margin-top: -2px; margin-left: -2px; border-radius: 50%; border: 4px solid orange; } .circlePercent > .counter:before { position: absolute; z-index: 1; top: 50%; margin-top: -13px; width: 100%; height: 26px; font-size: 26px; line-height: 26px; font-family: sans-serif; text-align: center; color: white; content: attr(data-percent) "%"; } .circlePercent > .counter:after { position: absolute; width: 80px; height: 80px; top: 6px; left: 6px; border-radius: 50%; background: orange; content: ""; } .circlePercent > .counter[data-percent="100"] { background: white; }
<div class="circlePercent"> <div class="counter" data-percent="0"></div> <div class="progress"></div> <div class="progressEnd"></div> </div>
演示： CODEPEN
以下是我获得百分比圆指标的尝试：
path画两个拱门，我设置stroke-dasharray。 我们并不需要设置dasharray，因为我们稍后使用javascript进行设置。
HTML
<svg class="circles" viewbox="0 0 200 200"> <g id="first"> <circle r="50" cx="100" cy="100" fill="#fb0"/> <path fill="none" stroke-linecap="round" stroke-width="7" stroke="#ffa" stroke-dasharray="250,250" d="M100 60 A1 1 0 0 1 100 140 A1 1 0 0 1 100 60"/> <text class="circ-text" text-anchor="middle" x="100" y="100" font-size="12px" fill="#ffa" >percentage </text> </g> </svg>
Javascirpt
- 使用
#first path获取#first path。 - 获取破折号arrays的长度：
path.getTotalLength(); - 增加破折号arrays直到它满：
setAttribute('stroke-dasharray', i+","+length);我在哪里增加。 - 找出我们的百分比：
(count++/ticks)*100 - 将百分比添加到svg文本中：
text.innerHTML=(count/tick)*100
var path = document.querySelector('#first path'); var text = document.querySelector('#first .circ-text'); var length = path.getTotalLength(); var i = 0; var count = 0; var ticks = 50; setInterval(function() { if (i < length+length/ticks) { path.setAttribute('stroke-dasharray', i+","+length); i+=length/ticks; text.innerHTML=Math.round((count++/ticks)*100); } }, 100);
var path = document.querySelector('#first path'); var text = document.querySelector('#first .circ-text'); var length = path.getTotalLength(); var i = 0; var count = 0; var ticks = 50; setInterval(function() { if (i < length+length/ticks) { path.setAttribute('stroke-dasharray', i+","+length); i+=length/ticks; text.innerHTML=Math.round((count++/ticks)*100); } }, 100);
<svg class="circles" viewbox="0 0 500 200"> <g id="first"> <circle r="50" cx="100" cy="100" fill="#fb0" /> <path fill="none" stroke-linecap="round" stroke-width="7" stroke="#ffa" stroke-dasharray="250,250" d="M100 60 A1 1 0 0 1 100 140 A1 1 0 0 1 100 60" /> <text class="circ-text" text-anchor="middle" x="100" y="100" font-size="12px" fill="#ffa">percentage</text> </g>
你尝试过吗？
<percent-display percent="75" side="" colors=""></percent-display>
资料来源： http ： //angularscript.com/angularjs-round-percentage-bar-directive-ngpercentdisplay/
循环百分比进度栏使用canvas …
var ctx = document.getElementById('circularLoader').getContext('2d'); var al = 0; var start = 4.72; var cw = ctx.canvas.width; var ch = ctx.canvas.height; var diff; function progressSim(){ diff = ((al / 100) * Math.PI*2*10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 17; ctx.fillStyle = '#4285f4'; ctx.strokeStyle = "#4285f4"; ctx.textAlign = "center"; ctx.font="28px monospace"; ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12); ctx.beginPath(); ctx.arc(100, 100, 75, start, diff/10+start, false); ctx.stroke(); if(al >= 100){ clearTimeout(sim); // Add scripting here that will run when progress completes } al++; } var sim = setInterval(progressSim, 50);
<div id="loader"> <canvas id="circularLoader" width="200" height="200"></canvas> </div>
