Оформление среднего рейтинга

[Mary_RND]

Доброго времени суток.

Подскажите, как сделать на css вот такое оформление средней оценки?

Надо чтобы красная полосочка менялась относительно получаемой цифры...

Спасибо

[npofopr]

Вот такой недавно использовал https://github.com/kottenator/jquery-circle-progress

[Mary_RND]

39 минут назад, npofopr сказал:

Вот такой недавно использовал https://github.com/kottenator/jquery-circle-progress

ооо) какая интересная штука )

Только не могу понять, как ставится ограничение >_<

[npofopr]

Через data-value="0.9" можно

вроде ж всё написано

[Дмитрий Афанасьев]

https://kimmobrunfeldt.github.io/progressbar.js/

[Mary_RND]

15 часов назад, npofopr сказал:

Через data-value="0.9" можно

вроде ж всё написано

неа, это подставляется мое значение

немного не так выразилась.. как поставить свой диапазон от 0 до 5

13 часов назад, Дмитрий Афанасьев сказал:

https://kimmobrunfeldt.github.io/progressbar.js/

тут такой же вопрос, как подставить свой диапазон Т_Т

[npofopr]

Что такое диапазон? 
Это же круг. 
Целый круг - 1. Делите на 5, да и всё. 

[Mary_RND]

55 минут назад, npofopr сказал:

Что такое диапазон? 
Это же круг. 
Целый круг - 1. Делите на 5, да и всё. 

В итоге сделала так:

		$('.average.circle').each(function() {
		  var $circle = $(this),
		    val = $circle.data('val'),
		    max = $circle.data('max');

		  $circle.circleProgress({
		    value: val/max
		  }).on('circle-animation-progress', function(event, progress, stepValue) {
		    $(this).find('strong').html(Math.round(stepValue*max*10)/10);
		  });
		});

подставляем например data-val="4.1" - значение до которого крутится,

data-max="5" - максимальное значение (100%)

а вместо $('.average.circle') подставляем свой элемент

 

<div class="pp-review__average">
	<div class="average circle"
         data-val="4.1"
         data-size="36"
         data-thickness="5"
         data-max="5"
         data-animation-start-value="1.0"
         data-fill="{ "color": "rgba(0, 0, 0, .3)", "color": "rgba(207, 10, 38, 1)"}"
         data-reverse="true">
	</div>
</div>

 

Edited July 20, 2018 by Mary_RND