Countdown Status Bar

Question

I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. I am pretty sure CSS is working all right and there has to be some problem with JavaScript.The countdown did not start instead I was left with just this barenter image description here

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <style>
    #progressBar {
      width: 90%;
      margin: 10px auto;
      height: 22px;
      background-color: #0A5F44;
    }
    
    #progressBar div {
      height: 100%;
      text-align: right;
      padding: 0 10px;
      line-height: 22px;
      /* same as #progressBar height if we want text middle aligned */
      width: 0;
      background-color: #CBEA00;
      box-sizing: border-box;
    }
    /* Do not take in account */
    
    html {
      padding-top: 30px
    }
    
    a.solink {
      position: fixed;
      top: 0;
      width: 100%;
      text-align: center;
      background: #f3f5f6;
      color: #cfd6d9;
      border: 1px solid #cfd6d9;
      line-height: 30px;
      text-decoration: none;
      transition: all .3s;
      z-index: 999
    }
    
    a.solink::first-letter {
      text-transform: capitalize
    }
    
    a.solink:hover {
      color: #428bca
    }
  </style>
</head>

<div id="progressBar">
  <div class="bar"></div>
</div>

<body>
  <script>
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = timeleft * $element.width() / timetotal;
      $element.find('div').animate({
        width: progressBarWidth
      }, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    };

    progress(600, 600, $('#progressBar'));
  </script>

</body>

</html>

What problem? Please describe what you are seeing, and what you expect. Are there any errors in the console? And ` — Ken Y-N, Sep 16 '20 at 07:39
Please do not repost the [same question](https://stackoverflow.com/questions/63914001/countdown-progressive-bar) again - you can wait on your existing question to get some answer. - Also, your code works fine here you need to ensure that you are loading the scripts properly in your page `head` — Always Helping, Sep 16 '20 at 07:41
would be great if you could create a js fiddle out of it or something so we can see the output — Muhammad Murad Haider, Sep 16 '20 at 07:42
@Pranay try now - i have edited your snippet - its working fine - copy the exact same code. — Always Helping, Sep 16 '20 at 07:50
@AlwaysHelping Please do not fix code in the question; post an answer instead. — Ken Y-N, Sep 16 '20 at 07:52
@KenY-N typo types question does not need an answers. Moving a div from bottom to top is not an answer - i suppose :) — Always Helping, Sep 16 '20 at 07:52
@PranaySinghParihar Happy to help. You just need to move the div from bottom to the top after `` to work it. — Always Helping, Sep 16 '20 at 07:55
actually we have to define $ before using it and it is defined with jquery cdn so we have to add cdn before any script tag and also the script tag always use in bottom of body because it gives full access to upper html elements to jquery if we define it middle of elements it can create issue — BugsCreator, Sep 16 '20 at 07:57
@AlwaysHelping No, fixing code [is a Bad Edit](https://meta.stackoverflow.com/a/260246/1270789). — Ken Y-N, Sep 16 '20 at 08:00
@KenY-N Please refer to this [question](https://stackoverflow.com/questions/63914001/countdown-progressive-bar) the other people have said and done the same thing but i guess OP did not get the point of having a div after the script to which i have explained. Any ways someone answered the same thing as well now below. Thanks :) — Always Helping, Sep 16 '20 at 08:02
put the jquery import inside a head or body not out of them!!! — Gianluca Musa, Sep 16 '20 at 08:08

score 0 · Answer 1 · answered Sep 16 '20 at 07:47

I Think You Have Error In Many Things Like You Have To Add Jquery cdn Before script ,Error in Script tag ,And Also You Have to add html elements before script tag

    <!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>

<body>
<div id="progressBar">
  <div class="bar"></div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(6000, 6000, $('#progressBar'));
</script>


</body>

</html>

Try This It Work Fine For Me

score 0 · Answer 2 · answered Sep 16 '20 at 07:57

I found different error, move the jquery import, and add the function on document ready.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #progressBar {
      width: 90%;
      margin: 10px auto;
      height: 22px;
      background-color: #0A5F44;
    }
    
    #progressBar div {
      height: 100%;
      text-align: right;
      padding: 0 10px;
      line-height: 22px; /* same as #progressBar height if we want text middle aligned */
      width: 0;
      background-color: #CBEA00;
      box-sizing: border-box;
    }
    
    /* Do not take in account */
    html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
    </style>
 <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    
    <body>
    <script>
    function progress(timeleft, timetotal, $element) {
        var progressBarWidth = timeleft * $element.width() / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
        if(timeleft > 0) {
            setTimeout(function() {
                progress(timeleft - 1, timetotal, $element);
            }, 1000);
        }
    };
    $(function() {
    progress(600, 600, $('#progressBar')); });

    </script>
   
    <div id="progressBar">
      <div class="bar"></div>
    </div>
    </body>
    
    </html>

It works really well, I had one doubt regarding the time what should I change if I want the time to be of different value. Thanks, ins advance. — , Sep 16 '20 at 08:36
You can change it progress(6000, 6000, $('#progressBar')) 6000 = 100 minute or 60 = 1 minute – — Gianluca Musa, Sep 16 '20 at 08:49

Countdown Status Bar

2 Answers2