Нашел на просторах интернета код для прогресс бара с плавающим текстом, то есть, по мере выполнения текст меняется
<div class="load-box">
<div class="load-box__wrap">
<div class="load-box__wrap-count">
<div class="load-box__count">
<div class="load-box__count-val">0</div>
<div class="load-box__count-percent">%</div>
</div>
</div>
<div class="load-box__loader"><svg width="226" height="226" viewport="0 0 113 113" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="103" cx="112" cy="112" fill="transparent" stroke-dasharray="765.48"></circle>
<circle class="line" r="103" cx="112" cy="112" fill="transparent" stroke-dasharray="0,765.48"></circle>
</svg></div>
</div>
<div class="load-box__inner">
<div class="load-box__inner-wrap">
<div class="load-box__text load-box__text_1">Обработка Ваших ответов</div>
<div class="load-box__text load-box__text_2">Анализ Вашего диетического профиля</div>
<div class="load-box__text load-box__text_3">Расчет Вашего метаболического возраста</div>
<div class="load-box__text load-box__text_4">Адаптация плана к Вашему плотному графику</div>
<div class="load-box__text load-box__text_5">Подбор подходящих рецептов</div>
<div class="load-box__text load-box__text_6">Ваша индивидуальная программа снижения веса готова!</div>
</div>
</div>
</div>
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
@font-face {
font-family: 'LavaHeavyRegular';
font-display: swap;
src: url("f/lavaheavy/LavaHeavyRegular.woff2") format('woff2'), url("f/lavaheavy/LavaHeavyRegular.woff") format('woff'), url("f/lavaheavy/LavaHeavyRegular.ttf") format('truetype');
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-size: 100%;
-webkit-text-size-adjust: 100%;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
position: relative;
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #000000;
background-color: #f8f8f8;
padding-top: 56px;
margin: 0;
}
@media (max-width: 767px) {
body {
background-color: #fff;
}
}
.load-box__wrap {
position: relative;
display: flex;
justify-content: center;
}
.load-box__wrap-count {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.load-box__count {
display: flex;
justify-content: center;
align-items: baseline;
}
.load-box__count-val {
font-size: 63px;
font-weight: 600;
}
.load-box__count-percent {
font-size: 23px;
font-weight: 600;
}
.load-box__loader {
transform: rotate(270deg);
}
.load-box__loader circle {
stroke: #dcdcdc;
stroke-width: 1em;
}
.load-box__loader .line {
stroke: #00cfc3;
stroke-width: 1.02em;
}
.load-box__inner {
margin-top: 50px;
}
@media (max-width: 767px) {
.load-box__inner {
padding: 0 50px;
}
}
.load-box__inner,
.load-box__inner-wrap {
position: relative;
}
.load-box__text {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-bottom: 15px;
font-size: 20px;
line-height: 1.14;
text-align: center;
text-transform: capitalize;
color: #000000;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
visibility: hidden;
}
(function($) {$(function () {
var $block, $text, $text1, $text2, $text3, $text4, $text5, $text6, initLoader, timeoutSet;
$block = $(".load-box");
if (!$block.length) {
return;
}
$text = $block.find(".load-box__text");
$text1 = $block.find(".load-box__text_1");
$text2 = $block.find(".load-box__text_2");
$text3 = $block.find(".load-box__text_3");
$text4 = $block.find(".load-box__text_4");
$text5 = $block.find(".load-box__text_5");
$text6 = $block.find(".load-box__text_6");
//show texts
timeoutSet = function timeoutSet(el, time) {
return setTimeout(function () {
if (el === $text6) {
el.addClass("show-last");
} else {
el.addClass("show");
}
return setTimeout(function () {
return el.removeClass("show");
}, 2100);
}, time);
};
initLoader = function initLoader() {
var bar;
bar = new ProgressBar.Circle(".load-box__loader", {
strokeWidth: 4,
step: function step(state, circle) {
var value;
value = Math.round(circle.value() * 100);
return circle.setText(value + "<span>%</span>");
}
});
bar.animate(0.56, {
duration: 4500
}, function () {
return bar.animate(0.61, {
duration: 4000
}, function () {
return bar.animate(0.90, {
duration: 2000
}, function () {
return bar.animate(0.93, {
duration: 3000
}, function () {
return bar.animate(1, {
duration: 700
}, function () {});
});
});
});
});
timeoutSet($text1, 100);
timeoutSet($text2, 2200);
timeoutSet($text3, 4700);
timeoutSet($text4, 7300);
timeoutSet($text5, 10000);
return timeoutSet($text6, 13000);
};
return $(document).bind('loaderInit', function () {
return initLoader();
});
});
Проблема в том, что прогресс бар не анимируется, как буд то в js, что то не дописано или наоборот есть ошибка, но прогресс стоит на 0% и продвижений нет! Так же перерыл весь интернет, только этот код нашел который идет с текстом, подскажите пожалуйста может у Вас есть такой код, а может этот можно как то подкорректировать, спасибо заранее!
