如何在一定程度上停止循環進度？

Question

我正在使用來自網站的代碼片段作為循環進度條，但現在我被卡住了。 我無法解決如何在特定點（比如 73% 或 90%）停止進度條。 我怎樣才能做到這一點？

 const numb = document.querySelector(".numb"); let counter = 0; setInterval(() => { if (counter == 100) { clearInterval(); } else { counter += 1; numb.textContent = counter + "%"; } }, 80);

 .circular { height: 150px; width: 150px; position: relative; } .circular .inner, .circular .outer, .circular .circle { position: absolute; z-index: 6; height: 100%; width: 100%; border-radius: 100%; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); } .circular .inner { top: 36%; left: 37%; height: 117px; width: 117px; margin: -40px 0 0 -40px; background-color: #ffffff; border-radius: 100%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .circular .circle { z-index: 1; box-shadow: none; } .circular .numb { 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: #F2F5F5; -webkit-border-radius: 100%; clip: rect(0px, 150px, 150px, 75px); } .circle .bar .progress { position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; clip: rect(0px, 75px, 150px, 0px); } .circle .bar .progress, .dot span { background: #4158d0; } .circle .left .progress { z-index: 1; animation: left 4s linear both; } @keyframes left { 100% { transform: rotate(180deg); } } .circle .right { z-index: 3; transform: rotate(180deg); } .circle .right .progress { animation: right 4s linear both; animation-delay: 4s; } @keyframes right { 100% { transform: rotate(180deg); } } .circle .dot { z-index: 2; position: absolute; left: 50%; top: 50%; width: 50%; height: 10px; margin-top: -5px; animation: dot 8s linear both; transform-origin: 0% 50%; } .circle .dot span { position: absolute; right: 0; width: 16px; height: 16px; border-radius: 100%; } @keyframes dot { 0% { transform: rotate(-90deg); } 50% { transform: rotate(90deg); z-index: 4; } 100% { transform: rotate(270deg); z-index: 4; } }

 <div class="circular"> <div class="inner"></div> <div class="outer"></div> <div class="numb"> 0% </div> <div class="circle"> <div class="dot"> <span></span> </div> <div class="bar left"> <div class="progress"></div> </div> <div class="bar right"> <div class="progress"></div> </div> </div> </div>

Answer 1

也許你可以說 if(counter == 73) { animation.pause() }

Answer 2

 const numb = document.querySelector(".numb"); let counter = 0; setInterval(()=>{ if(counter == 73){ clearInterval(); }else{ counter+=1; numb.textContent = counter + "%"; } }, 80);

 .circular{ height: 150px; width: 150px; position: relative; } .circular .inner, .circular .outer, .circular .circle{ position: absolute; z-index: 6; height: 100%; width: 100%; border-radius: 100%; box-shadow: inset 0 1px 0 rgba(0,0,0,0.2); } .circular .inner{ top: 36%; left: 37%; height: 117px; width: 117px; margin: -40px 0 0 -40px; background-color: #ffffff; border-radius: 100%; box-shadow: 0 1px 0 rgba(0,0,0,0.2); } .circular .circle{ z-index: 1; box-shadow: none; } .circular .numb{ 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: #F2F5F5; -webkit-border-radius: 100%; clip: rect(0px, 150px, 150px, 75px); } .circle .bar .progress{ position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; clip: rect(0px, 75px, 150px, 0px); } .circle .bar .progress, .dot span{ background: #4158d0; } .circle .left .progress{ z-index: 1; animation: left 4s linear both; } @keyframes left { 100%{ transform: rotate(180deg); } } .circle .right{ z-index: 3; transform: rotate(180deg); } .circle .right .progress{ animation: right 4s linear both; animation-delay: 4s; } @keyframes right { 100%{ transform: rotate(80deg); } } .circle .dot{ position: absolute; left: 50%; top: 50%; width: 50%; height: 10px; margin-top: -5px; animation: dot 8s linear both; transform-origin: 0% 50%; } .circle .dot span { position: absolute; right: 0; width: 16px; height: 16px; border-radius: 100%; } @keyframes dot{ 0% { transform: rotate(-90deg); } 50% { transform: rotate(90deg); z-index: 4; } 100% { transform: rotate(270deg); z-index: 4; } }

 <div class="circular"> <div class="inner"></div> <div class="outer"></div> <div class="numb"> 0% </div> <div class="circle"> <div class="bar left"> <div class="progress"></div> </div> <div class="bar right"> <div class="progress"></div> </div> </div> </div>