Почему не работает скрипт?

Question

[Дмитрий]

<div class="elem-exp">
	<svg class="js-svg-bar svg-bar" id='progress' percent='' viewport='0 0 140 140'>
		<circle cx='95' cy='95' r='60'></circle>
		<circle cx='95' cy='95' r='60'></circle>
	</svg>
	<div class="elem-exp_descr">
		<img src="img/icons/wp_64x64.png" alt="">
		<p><span data-to="30" data-speed="1000" class="js-bar-count"></span>%</p>
	</div>
</div>

$('.elem-exp .js-svg-bar').attr({
	'percent', function () {
		return $(this).countTo({
			to: 70,
			speed: 1000
		});
	};
});

Атрибут percent это вот эта красная полоска, которую я хочу привести в движение

Вот ссылка на док по либе, может вдруг я что-то не так по ней делаю.

Может нужно сделать подобное не через .attr(), а что-то другое?

Answer 1

[Damir Makhmutov]

Вам нужно делать как-то так:

$('.elem-exp .js-svg-bar').countTo({
    to: 70,
    speed: 1000,
    onUpdate: function (value) {
        $(this).attr('percent', value);
    }
});

Comments

[Дмитрий]

Жаль, но так не получается)

[Faliah]

Дмитрий: С точки зрения использования плагина и работоспособности кода Damir Makhmutov привел правильный вариант. Каким образом у вас строится логика отображения того, что попадает в атрибут 'percent'?

Answer 2

[Faliah]

Не могли бы вы уточнить логику запуска отсчета и отображения прогресса?

Чтобы изменять значение атрибута 'percent' по ходу изменения значения счетчика, используйте такой код:

$('.elem-exp .js-svg-bar').countTo({
  to: 70,
  speed: 1000,
  onUpdate: function(value) {
    $(this).attr({'percent': value});
  }
});

Comments

[Дмитрий]

Логика такова. Есть 3 пункта меню табами. По клику на один из пунктов, он стает видимым, остальные display : none. Также по клику должны запускаться анимации через setTimeout

$('#page-2').click(function(e) {
  setTimeout(function(){
    $('.elem-exp .js-svg-bar').countTo({
      to: 70,
      speed: 1000,
      onUpdate: function(value) {
        $(this).attr({'percent': value});
      }
    });
 }, 200);
});

[Дмитрий]

Отображение прогресса идет через css

.svg-bar{
	display: block;
	height: 189px;
	transform: rotate(-90deg);
	circle {
		fill: none;
		stroke-width: 12px;
		&:nth-child(1) {
			stroke: rgba(grey, .2);;
		}
		&:nth-child(2) {
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 373.424;
			stroke-dashoffset: 373.424;
			transition: all 150ms ease-out;
		}
	}
	@for $i from 1 through 100 {
		&[percent="#{$i}"] {
			circle {
				&:nth-child(2) {
					stroke-dashoffset: #{402.124 - (402.124 * ($i/100))};
				}
			}
		}
	}
}

Кажется, как я понял, править нужно css, а не атрибут?)

[Faliah]

Дмитрий: Вот, это уже проливает свет на логику, сейчас вчитаюсь только

[Дмитрий]

Faliah: может стоить присваивать стили к второму circle не через css, а через js?

[Faliah]

Дмитрий: Вот кое-что начало получаться: https://codepen.io/fameliesahead/pen/xONzjJ

[Faliah]

Дмитрий: Нужно изменять атрибут stroke-dashoffset у обоих элементов circle получается

[Дмитрий]

Faliah: значит я догадался правильно. Спасибо)