Круговой процентный прогресс бар
1,00
р.
Мне хотелось бы иметь круговой процентный показатель на моем сайте:
В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано? У меня есть желтый круг в image-file, но может быть проще, как делают это некоторые, все с помощью CSS?
Свободный перевод вопроса Circular percent progress bar от участника @dhrm.
Ответ
Учитывая форму прогресс-бара (закругленный конец/начало), я хотел бы предложить, использование 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:25% } 100%
К сожалению, браузер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:25% } 1% 50%
100%
Свободный перевод ответа от участника @web-tiki.
В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано? У меня есть желтый круг в image-file, но может быть проще, как делают это некоторые, все с помощью CSS?
Свободный перевод вопроса Circular percent progress bar от участника @dhrm.
Ответ
Учитывая форму прогресс-бара (закругленный конец/начало), я хотел бы предложить, использование 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:25% } 100%
К сожалению, браузер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:25% } 1% 50%
100%
Свободный перевод ответа от участника @web-tiki.
