How to change the text on certain points-CodePudding

Using the below code it will display the single text with percentage loader but i am trying add multiple text instead of single, basically i am rshiny developer no i started learning html and css code it wil be useful if i get any idea on how to change the text on certain points

i have tried this keyframe anim i dont know y its not working

@keyframes anim{
    10%{
        content:'Stage 1';
    }
    25%{
        content:'Stage 2';
    }
    50%{
        content:'Stage 3';
    }
    75%{
        content:'Stage 4';
    }
    100%{
        content:'Completed';
    }
}

const analyse=document.getElementById('analyse');

const numb = document.querySelector(".number");

let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
    if (counter == 100) {
        fetch.style.display='inline-block';
        clearInterval(id1);

    } else {
        counter  = 1;
        numb.innerHTML = counter   "%";
        fetch.style.display='none';
    }
}, 120);

html, body{
    display:inline-block;
    height:100%;
    text-align: left;
    place-items: left;
    background: #dde6f0;
}
.circular{
    height:100px;
    width: 100px;
    margin-left: 43%;
    margin-top:10%;
    position: absolute;
    display: inline-block;
    /* transform:scale(2); */
}
.circular .inner{
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
    background: #dde6f0;
    border-radius: 100%;

}
.circular .number{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:10;
    font-size:18px;
    font-weight:500;
    color:#4158d0;
}
.circular .bar{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 100%;
    clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    clip: rect(0px, 50px, 100px, 0px);
    background: #4158d0;
}
.circle .left .progress{
    z-index:1;
    animation: left 6s linear both;
}
@keyframes left{
    100%{
        transform: rotate(180deg);
    }
}
.circle .right {
    transform: rotate(180deg);
    z-index:3;

}
.circle .right .progress{
    animation: right 6s linear both;
    animation-delay:6s;
}
@keyframes right{
    100%{
        transform: rotate(180deg);
    }
}
.text::after{
    animation:anim 10s linear both;

}

<html>
<head>
    <link rel="stylesheet" href="TestTwoCss.css">
</head>

<body>
<div >
    <div id="analyse">
        <div >Analysing...</div>

        <div >
            <div ></div>
            <div >0%</div>
            <div >
                <div >
                    <div ></div>
                </div>
                <div >
                    <div ></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CodePudding user response：

you can use switch and change analyze text base on counter .

const analyzeText = document.querySelector("#analyse .text");

const numb = document.querySelector(".number");

let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
  if (counter == 100) {
    // fetch.style.display='inline-block';
    clearInterval(id1);
  } else {
    counter  = 1;
    numb.innerHTML = counter   "%";
    // fetch.style.display='none';
    
    changeText(counter); // change analyze text base on counter value.
  }
}, 110);



function changeText() {
  switch (counter) {
    case 1:
      analyzeText.innerHTML = "Stage 1";
      break;
    case 25:
      analyzeText.innerHTML = "Stage 2";
      break;
    case 50:
      analyzeText.innerHTML = "Stage 3";
      break;
    case 75:
      analyzeText.innerHTML = "Stage 4";
      break;
    case 100:
      analyzeText.innerHTML = "Completed";
      break;
  }
}

html, body{
    display:inline-block;
    height:100%;
    text-align: left;
    place-items: left;
    background: #dde6f0;
  }
  .circular{
    height:100px;
    width: 100px;
    margin-left: 43%;
    margin-top:10%;
    position: absolute;
    display: inline-block;
    /* transform:scale(2); */
  }
  .circular .inner{
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
    background: #dde6f0;
    border-radius: 100%;
   
  }
  .circular .number{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:10;
    font-size:18px;
    font-weight:500;
    color:#4158d0;
  }
  .circular .bar{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 100%;
    clip: rect(0px, 100px, 100px, 50px);
  }
  .circle .bar .progress{
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    clip: rect(0px, 50px, 100px, 0px);
    background: #4158d0;
  }
  .circle .left .progress{
    z-index:1;
    animation: left 6s linear both;
  }
  @keyframes left{
    100%{
      transform: rotate(180deg);
    }
  }
  .circle .right {
    transform: rotate(180deg);
    z-index:3;
   
  }
  .circle .right .progress{
    animation: right 6s linear both;
    animation-delay:6s;
  }
  @keyframes right{
    100%{
      transform: rotate(180deg);
    }
  }

<html>
<head>
<!--     <link rel="stylesheet" href="TestTwoCss.css"> --> 
</head>

<body>
    <div >
        <div id="analyse">
        <div >Analysing...</div>

        <div >
            <div ></div>
            <div >0%</div>
            <div >
                <div >
                    <div ></div>
                </div>
                <div >
                    <div ></div>
                </div>
            </div>
        </div>
    </div>
      
    </div>
</body>

</html>