CODEWITHSUNDEEP
javascripthtmljquery
Shashi123
Shashi123

Reputation: 159

Need help modifying progress bar - html/jquery

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, i.e. 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.

Upvotes: 1

Views: 111

Answers (2)

alotropico
alotropico

Reputation: 1994

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>

Upvotes: 1

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Related Questions