Home>

found on the Internet a code for a progress bar with floating text, that is, as it is executed, the text changes

HTML

<
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" >
Processing your responses <
/div >
                <
div class= "load-box__text load-box__text_2" >
Analysis of your dietary profile <
/div >
                <
div class= "load-box__text load-box__text_3" >
Calculating your metabolic age <
/div >
                <
div class= "load-box__text load-box__text_4" >
Adapting the plan to your busy schedule <
/div >
                <
div class= "load-box__text load-box__text_5" >
Selection of suitable recipes <
/div >
                <
div class= "load-box__text load-box__text_6" >
Your personalized weight loss program is ready! <
/div >
            <
/div >
        <
/div >
    <
/div >
``,
CSS
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;
}

Js
(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 ();
  });
});

The problem is that the progress bar does not animate, as if in js, that something is not completed or, on the contrary, there is an error, but the progress is 0% and there is no progress! I also rummaged through the entire Internet, only I found this code that comes with the text, please tell me, maybe you have such a code, or maybe this one can be corrected somehow, thanks in advance!

The console does not pass more than one function for you, it turns out it is not called? The code is written, as I see it in jquery, you gave the code that is with an error, there is a lot more missing, for example the last closing brackets. The code is so scary that I doubt that someone will go to disassemble it piece by piece.

WalkMess2021-11-08 01:42:11

@WalkMess I see, thanks for the explanation, but I don't even focus on this code, it's just that you can't find the progress of a bar with the text changing on the Internet, maybe someone's been lying around, let's say))

Kazimirov_art2021-11-08 01:42:11

What does it mean by changing text, there are examples, it's not very clear, it's just that the text changes -this can be implemented in js.

WalkMess2021-11-08 01:42:11

@WalkMess is that there are almost no examples on the Internet at all, let's say there is one example thecode.media/cryptorush, but there is just a progress bar with a button and not a round bar. But changing text, that is, loading from 0-20%, for example, text No. 1 is shown, from 20-40 text No. 2 is shown, from 40-80 text No. 3 is acceptable, when the scale goes the text changes

Kazimirov_art2021-11-08 01:42:11

@WalkMess it is clear that this can be implemented in js, but some knowledge is not enough for this (

Kazimirov_art2021-11-08 01:42:11