Бордер в процентах

#javascript #html #css #css3 #svg

Пытаюсь понять, как сделать такой бордер



Есть очевидный вариант с отрисовкой 100 картинок под каждый процент, но хотелось
бы что нибудь на css и js.
Примеров кода нет, т.к даже микроидей нет.
    

Ответы

Ответ 1

Проще, лучше и красивее - будет реализовать такое на SVG, например:



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%;}










Источник: Круговой процентный прогресс бар | StackOverflow на русском



Можно конечно и на JS\JQ, но будет это несколько кривовато и больше кода займёт.