0

нашел на просторах интернета код для прогресс бара с плавающим текстом, то есть, по мере выполнения текст меняется

(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();
      });
    });
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<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>

Проблема в том, что прогресс бар не анимируется, как буд то в js, что то не дописано или наоборот есть ошибка, но прогресс стоит на 0% и продвижений нет! Так же перерыл весь интернет, только этот код нашел который идет с текстом, подскажите пожалуйста может у Вас есть такой код, а может этот можно как то подкорректировать, спасибо заранее!

9
  • У вас не одна функция консоль не пропускает, получается она не вызывается? Код написан, как я вижу на jquery, Вы дали код, который с ошибкой, там не хватает еще много чего, например последние закрывающие скобки. Код на столько страшный, что я сомневаюсь, что его кто-то пойдет разбирать по кусочкам.
    – WalkMess
    6 ноя 2021 в 10:51
  • @WalkMess Понятно, спасибо за объяснение, но я даже на этот код акцент не делаю, просто в интернете вообще не найдешь прогресс бара с текстом меняющимся, может у кого то, так скажем завалялся)) 6 ноя 2021 в 11:17
  • Что значит меняющим текстом, есть примеры, не очень понятно, просто текст меняется - это на js можно реализовать.
    – WalkMess
    6 ноя 2021 в 11:28
  • @WalkMess вот именно что примеров вообще почти нету в интернете, вот допустим есть один пример thecode.media/cryptorush, но там просто прогресс бар с кнопкой и не круглый бар. Но меняющийся текст, то есть загрузка от 0-20% к примеру показывается текст №1, от 20-40 показывается текст №2, от 40-80 допустим текст №3, когда шкала идет текст меняется 6 ноя 2021 в 12:54
  • @WalkMess понятно что в js это можно реализовать, но некоторых знаний не хватает для этого( 6 ноя 2021 в 12:55

1 ответ 1

1

Я предположу, что это то, что вам нужно. Я сделал через цикл, ибо мне лень, но вы можете улучшить анимацию через дату.

const crice = document.querySelector('.progress__crice'); 
const text = document.querySelector('.alert-text');
const radius = crice.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

crice.style.strokeDasharray = `${circumference} ${circumference}`;
crice.style.strokeDashoffset = circumference;

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

const setProgress = async (percent) => {
  for (let i = 0; i < 100; i += 1) {
    await sleep(30);
    percent++;

    const offset = circumference - (percent / 100) * circumference;
    crice.style.strokeDashoffset = offset;   
    
    //Немного топорно, но пофиг.

    if (percent === 10) { 
      text.innerHTML = 'Инициализация протокола'
    } 

    if (percent === 22) { 
      text.innerHTML = 'Загрузка мира'
    } 

    if (percent === 55) { 
      text.innerHTML = 'Удаление ненужных данных'
    }
  } 
};

setProgress(0);
/* Этот normalize используется в этом компоненте для нормализации стилей.  */
*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}  

html, body {  
  background-color: #fff;
  height: 100%; 
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px;
}

.crice { 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
  height: 100%;
}

.alert-text { 
  display: inline-block;
  color: #000;
}
<body>
    <div class="wrapper">
      <div class="crice">
        <svg class="progress" width="120px" height="120px" stroke='#e5e5e5' stroke-width='10px'>
          <circle class="progress__crice" cx="60" cy="60" r="52" fill='transparent' />
        </svg>  
        <div class="alert-text">Загрузка</div>
      </div>  
    </div> 
    <script src="script.js"></script>
  </body>

Cледить

1
  • Спасибо большое, немного, но Вы решили мою проблему 6 ноя 2021 в 17:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.