需要帮助修改进度条 - html/jquery

Question

I have certain tasks/jobs running in the backend. I made a basic webpage which shows in-progress/completion status of those tasks. My webpage is being refreshed every few seconds and accordingly the new counters of the tasks/jobs completed are displayed.

This Liquid bubble progress bar have caught my attention too much and I want to replicate the same into my basic webpage. But that one, waits for user to input a number in a text box and accordingly the progress bar changes.

I am looking to make it live indicator, ie without manually inputting a value into the text box.

I tried having a function which loads when the page is refreshed and input current completion status counter into that text box (example 22%), but seems there is no effect.

function pbar() {
    document.getElementById("percent-box").value = "22";
}

Reading lines of the actual javascript indicated the bubble changes it value only when there is a keyup - if not it stays at the default value which is set at 67.

Please could I get some help to make the right javascript code and the right function calls to make that a live one. Thanks heaps in advance.

Answer 1

I wrapped the functionality in a setProgressValue function, which you can call at any time.

Great work by June Hanabi and Jamie Dixon .

 function setProgressValue(val) { var colorInc = 100 / 3; var valOrig = val; val = 100 - val; if(valOrig == 0) { $("#percent-box").val(0); $(".progress .percent").text(0 + "%"); } else $(".progress .percent").text(valOrig + "%"); $(".progress").parent().removeClass(); $(".progress .water").css("top", val + "%"); if(valOrig < colorInc * 1) $(".progress").parent().addClass("red"); else if(valOrig < colorInc * 2) $(".progress").parent().addClass("orange"); else $(".progress").parent().addClass("green"); } setProgressValue(80) setTimeout(()=>{setProgressValue(42)}, 2000) setTimeout(()=>{setProgressValue(27)}, 4000) setTimeout(()=>{setProgressValue(93)}, 6000) setTimeout(()=>{setProgressValue(67)}, 8000)

 .wrapper > div { transform: scale(.5); } *{box-sizing:border-box}body,html{height:100%}body{background-color:#1a1a1a;font-family:sans-serif;font-size:15px;color:#ccc}.wrapper{display:-webkit-box;display:-ms-flexbox;display:box;display:flex;-webkit-box-align:center;-o-box-align:center;align-items:center;-webkit-box-pack:center;-o-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-o-box-orient:vertical;flex-direction:column;height:100%}.green{margin-top:15px}.green .progress,.orange .progress,.red .progress{position:relative;border-radius:50%}.green .progress,.orange .progress,.red .progress{width:250px;height:250px}.green .progress{border:5px solid #53fc53}.green .progress{box-shadow:0 0 20px #029502}.green .progress,.orange .progress,.red .progress{-webkit-transition:all 1s ease;transition:all 1s ease}.green .progress .inner,.orange .progress .inner,.red .progress .inner{position:absolute;overflow:hidden;z-index:2;border-radius:50%}.green .progress .inner,.orange .progress .inner,.red .progress .inner{width:240px;height:240px}.green .progress .inner,.orange .progress .inner,.red .progress .inner{border:5px solid #1a1a1a}.green .progress .inner,.orange .progress .inner,.red .progress .inner{-webkit-transition:all 1s ease;transition:all 1s ease}.green .progress .inner .water,.orange .progress .inner .water,.red .progress .inner .water{position:absolute;z-index:1;width:200%;height:200%;left:-50%;border-radius:40%;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:spin;animation-name:spin}.green .progress .inner .water{top:25%}.green .progress .inner .water{background:rgba(83,252,83,.5)}.green .progress .inner .water,.orange .progress .inner .water,.red .progress .inner .water{-webkit-transition:all 1s ease;transition:all 1s ease}.green .progress .inner .water,.orange .progress .inner .water,.red .progress .inner .water{-webkit-animation-duration:10s;animation-duration:10s}.green .progress .inner .water{box-shadow:0 0 20px #03bc03}.green .progress .inner .glare,.orange .progress .inner .glare,.red .progress .inner .glare{position:absolute;top:-120%;left:-120%;z-index:5;width:200%;height:200%;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:50%}.green .progress .inner .glare,.orange .progress .inner .glare,.red .progress .inner .glare{background-color:rgba(255,255,255,.15)}.green .progress .inner .glare,.orange .progress .inner .glare,.red .progress .inner .glare{-webkit-transition:all 1s ease;transition:all 1s ease}.green .progress .inner .percent,.orange .progress .inner .percent,.red .progress .inner .percent{position:absolute;top:0;left:0;width:100%;height:100%;font-weight:700;text-align:center}.green .progress .inner .percent,.orange .progress .inner .percent,.red .progress .inner .percent{line-height:240px;font-size:92.3076923076923px}.green .progress .inner .percent{color:#03c603}.green .progress .inner .percent{text-shadow:0 0 10px #029502}.green .progress .inner .percent,.orange .progress .inner .percent,.red .progress .inner .percent{-webkit-transition:all 1s ease;transition:all 1s ease}.red{margin-top:15px}.red .progress{border:5px solid #ed3b3b}.red .progress{box-shadow:0 0 20px #7a0b0b}.red .progress .inner .water{top:75%}.red .progress .inner .water{background:rgba(237,59,59,.5)}.red .progress .inner .water{box-shadow:0 0 20px #9b0e0e}.red .progress .inner .percent{color:#a30f0f}.red .progress .inner .percent{text-shadow:0 0 10px #7a0b0b}.orange{margin-top:15px}.orange .progress{border:5px solid #f07c3e}.orange .progress{box-shadow:0 0 20px #7e320a}.orange .progress .inner .water{top:50%}.orange .progress .inner .water{background:rgba(240,124,62,.5)}.orange .progress .inner .water{box-shadow:0 0 20px #a0400c}.orange .progress .inner .percent{color:#a8430d}.orange .progress .inner .percent{text-shadow:0 0 10px #7e320a}@-webkit-keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="green"> <div class="progress"> <div class="inner"> <div class="percent"><span>67</span>%</div> <div class="water"></div> <div class="glare"></div> </div> </div> </div> </div>

Answer 2

You may want to consider using a promise. I've included documentation is the example below. It would avoid refreshing the whole page.

 let promise = new Promise( (resolve, reject) => { // Resolve the promise after 1 second // Replace this with an AJAX call to get the values from the server setTimeout(() => resolve("22"), 1000); }); promise.then( // Change the value with what the promise returned result => { let content = document.getElementById("percent-box"); content.innerHTML = result; }, // In case of an error show an alert error => alert("error") );

 <div id="percent-box">10</div>