Круговой процентный прогресс бар

892

17 февраля 2017, 01:33

Мне хотелось бы иметь круговой процентный показатель на моем сайте:

В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано?
У меня есть желтый круг в image-file, но может быть проще, как делают это некоторые, все с помощью CSS?

комментарии:

У меня нет пока никакого кода:) @dhrm

Поверь это просто - скачать CSS и HTML @here – dowomenfart

Не стройте круг с изображением. Это легко сделать с помощью CSS. @Bram Vanroy

Answer 1

Учитывая форму прогресс-бара (закругленный конец/начало), я хотел бы предложить, использование SVG.

DEMO: Radial progress bar

В следующем примере, прогресс идет в сочетании с атрибутом stroke-dasharray , а процент числа увеличиваются с 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>

Ответил: web-tiki

комментарии:

Это выглядит очень аккуратно. Но почему-то анимация не работает для меня в ie11 (количество растет, но белая полоса всегда на 100%) – @Альваро Монторо

@AlvaroMontoro к сожалению, IE не поддерживает SVG-анимации SMIL. Но вы можете достичь того же результата с помощью JS библиотек, таких, как Snap.svg см. пример на сайте кодепен, это работает в последней версии ФФ, хром и IE @web-tiki