javascript кружок с индикатором выполнения

Question

Я хочу создать круг прогресса. когда у меня есть ввод, где диапазон равен 1000. это число должно измениться в процентах в круге выполнения. я хочу что-то вроде этого [1]: https://i.stack.imgur.com/aKJva.png. пожалуйста, помогите мне. пишите что угодно, какие идеи могут мне помочь. мне нужна библиотека или нет? возможно, вы можете отправить мне ссылку на сайт, когда я смогу проверить свою задачу на практике

Я попробую это:

 <ul class="progress">
            <li data-name="SVG Skill" data-percent=${result.key}> <svg viewBox="-10 -10 220 220">
              <g fill="none" stroke-width="3" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
              </g>
              </svg> <svg viewBox="-10 -10 220 220">
              <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 
        C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke- 
      dashoffset="81"></path>
              </svg> </li>
</ul>

css:

@-webkit-keyframes 
load { 0% {
stroke-dashoffset:0}
}
@-moz-keyframes 
load { 0% {
stroke-dashoffset:0}
}
@keyframes 
load { 0% {
stroke-dashoffset:0}
 }

.progress>li {
display: inline-block;
position:absolute;
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;

}



 .progress>li:after {
  content: attr(data-percent);
  width: 100%;
  position: absolute;
  font-size: 15px;
  margin:55px -95px !important;
 text-align: center;
 }

 .progress svg {
  width: 7rem;
  height: 7rem;
  margin:30px -120px!important;
  position: absolute;
 }

 .progress svg:nth-child(2) {

   left: 0;
   top: 0;
   transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
  }

  .progress svg:nth-child(2) path {
   fill: none;
   stroke-width: 20;
   stroke-dasharray: 629;
   stroke: #005082;
  -webkit-animation: load 10s;
  -moz-animation: load 10s;
   -o-animation: load 10s;
   animation: load 10s;
}

Answer 1

let input = 0;
const overlay = document.getElementById("overlay");
const text = document.getElementById("text");

function converter(input) {
  if(input > 1000) input = 1000;
  const percentage = input / 1000;
  let stage = percentage < .125 ? 1 :
    percentage < .25 ? 2 :
    percentage < .375 ? 3 :
    percentage < .5 ? 4 :
    percentage < .625 ? 5 :
    percentage < .75 ? 6 :
    percentage < .875 ? 7 : 8

  const clipPath = {
    1: `polygon(0% 0%, 50% 0%, 50% 50%,${(percentage/.125 * 50) + 50}% 0%, 100% 0%, 100% 100%, 0% 100%)`,
    2: `polygon(0% 0%, 50% 0%, 50% 50%, 100% ${((percentage-.125)/.125 * 50)}%, 100% 100%, 0% 100%)`,
    3: `polygon(0% 0%, 50% 0%, 50% 50%, 100% ${((percentage-.25)/.125 * 50) + 50}%, 100% 100%, 0% 100%)`,
    4: `polygon(0% 0%, 50% 0%, 50% 50%, ${100-((percentage-.375)/.125 * 50)}% 100%, 0% 100%)`,
    5: `polygon(0% 0%, 50% 0%, 50% 50%, ${50-((percentage-.5)/.125 * 50)}% 100%, 0% 100%)`,
    6: `polygon(0% 0%, 50% 0%, 50% 50%, 0% ${100-((percentage-.625)/.125 * 50)}%)`,
    7: `polygon(0% 0%, 50% 0%, 50% 50%, 0% ${50-((percentage-.75)/.125 * 50)}%)`,
    8: `polygon(0% 0%, 50% 0%, 50% 50%, ${((percentage-.875)/.125 * 50)}% 0% )`,
  }[stage]
  overlay.style.clipPath = clipPath;
  text.textContent = `${Math.round(percentage * 100)}%`
}

const interval = setInterval(() => {
  converter(input)
  if(input === 1000) {
    clearInterval(interval);
    const inputEle = document.createElement("input");
    inputEle.setAttribute("type","number");
    inputEle.setAttribute("id","input");
    const submitEle = document.createElement("input");
    submitEle.setAttribute("type","submit");
    submitEle.setAttribute("value","submit");
    submitEle.onclick = () => converter(document.getElementById("input").value);
    document.body.append(inputEle);
    document.body.append(submitEle);
  }
  input += 1; 
}, 1);

#container {
  margin-bottom: 16px; 
}
#circle {
  width: 120px;
  height: 120px;
  border-radius: 120px;
  background-color: black;
  border: 8px solid lightblue;
  box-sizing: border-box;
}

#overlay {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 120px;
  border: 8px solid dimgray;
  box-sizing: border-box;
}
#text {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  height: 120px;
  width: 120px; 
  text-align: center;
  color: white;
  font-size: 24px;
}

<div id="container">
  <div id="text">0%</div>
  <div id="overlay"></div>
  <div id="circle"></div>
</div>