Loader — почему счетчик сжирает знак процента?

Question

[Alex Ivanov]

Добрый день, всем!
почему счетчик сжирает знак процента?

$('.count').each(function() {
	$(this).prop('counter',0).animate({
		counter:$(this).text()
	},{
		duration: 3000,
		easing: 'swing',
		step:function(now) {
			$(this).text(Math.ceil(now));
		}
	});
});

<div class="loader">
				<div class="line counter">
					<div class="line-inner"></div>
					<div class="circle count">90<span>%</span></div>
				</div>
			</div>

.line {
	position: relative;
	background: yellow;
	width: 250px;
	height: 40px;
	border-left: 4px solid yellow;
	border-radius: 6px;
}
.line-inner {
	position: absolute;
	border-radius: 6px;
	height: 30px;
	width: 0;
	left: 0;
	top: 5px;
	background: green;
	animation: load 3s forwards;
}
.loader {
	margin-bottom: 30px; 
}
@keyframes load {
	100% {
		width: 190px;
	}
}
.circle {
	color: #fff;
	position: absolute;
	left: 0;
	top: -5px;
	width: 46px;
	height: 46px;
	line-height: 36px;
    text-align: center;
	background: green;
	border-radius: 50%;
	border: 4px solid yellow;
	animation: load2 3s .2s forwards;
}
@keyframes load2 {
	100% {
		left: 180px;
	}
}

Answer 1

[tyzberd]

$(this).text(Math.ceil(now));
вы заменяете весь текст, процент там тоже. Лучше число в span с классом обернуть

Comments

[Alex Ivanov]

спасибо, работает!