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

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

  

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

Источник: Circular percent progress bar
    

Ответы

Ответ 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%;}






К сожалению, браузер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%;}










Источник: Circular percent progress bar  @web-tiki