web-dev-qa-db-ja.com

円の進行状況バー

私のサイトにパーセント円のインジケータが欲しいです：

Radial progress bar mockup

この場合、75％を示しています。これはどのように行う必要がありますか？画像ファイルに黄色の円がありますが、CSSを使用して簡単に、何らかの方法ですべてを行うことができれば、問題ありません。

htmlcsscss3svgcss-shapes
36
dhrm

進行状況バーの形状（丸い終了/開始）を考慮して、SVGの使用をお勧めします。

デモ： 放射状プログレスバー

Radial progress bar

次の例では、stroke-dasarray属性と％番号は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>

残念ながらIEはsvg SMILアニメーションをサポートしていません。IEサポートで同じ結果を得るには、snap.svgのようなライブラリを使用して、stroke-dasharray属性とJS：

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);
body{text-align:center;font-family:sans-serif;}
svg{width:30%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg" 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="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>
<svg 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="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>
64
web-tiki

純粋なHTML/CSSソリューション

要するに、CSS _border-radius_および_z-index_プロパティを使用して、オレンジ色の中央の円とオレンジ色の外側の輪の下に重ねられた白い半円を作成しました。最初、半円は左側のオレンジ色の追加レイヤーの後ろに完全に隠されていますが、その外側のエッジは、CSS transform: rotate()を介して中心軸を中心に回転すると徐々に現れ、プログレスバー。進行状況バーが中間点を通過すると、追加の策略が必要になります（詳細については、スニペットの下を参照）。

このすべては、JavaScriptを使用するアニメーションを除き、純粋なHTMLとCSSで行われました。 SVGベースのソリューションよりも多くのコードを必要とするように見えるかもしれませんが、実際にはマークアップははるかに単純であるため、私の意見では良い代替手段になります。

_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>_

プログレスバーが中間点に達すると、fiftyPlusクラスがコンテナ要素に追加されることに注意してください。これにより、円の右半分に静的な進行状況バーが追加されます。これがないと、進行状況は左側を埋めるのではなく右側から流出するように見えます。

18
DoctorDestructo

デモ：[〜＃〜] codepen [〜＃〜]

パーセンテージサークルインジケーターを取得する試みは次のとおりです。

パスは2つのアーチを描画し、ストロークダッシュ配列を設定します。後でjavascriptを使用してdasharrayを設定するため、実際にdasharrayを設定する必要はありません。

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

  1. _#first path_でパスを取得します。
  2. ダッシュ配列の長さを取得します：path.getTotalLength();
  3. ダッシュ配列をいっぱいになるまで増やします：setAttribute('stroke-dasharray', i+","+length); iが増えます。
  4. 現在のパーセンテージを調べる：_(count++/ticks)*100_
  5. 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>_
10
Persijn

円形パーセント進行状況バーCanvas...

Circular Loader

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>

デモを参照してください： http://codingflag.in/mysketch.php?sketch=9

6
Dr.Darshan

これを試しましたか？

<percent-display percent="75" side="" colors=""></percent-display>

出典： http://angularscript.com/angularjs-round-percentage-bar-directive-ngpercentdisplay/

3
Olen