CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dami
Dami

Reputation: 167

Continue run progress bar

I want to run this progress bar in continue like when % comes to at 100% it will again restart from 0% and continue run from 0% to 100%, view my demo here.

$(document).ready(function() {
    var progressbar = $('#progress_bar');
    max = progressbar.attr('max');
    time = (1000 / max) * 5;
    value = progressbar.val();

    var loading = function() {
        value += 1;
        addValue = progressbar.val(value);

        $('.progress-value').html(value + '%');
        var $ppc = $('.progress-pie-chart'),
            deg = 360 * value / 100;
        if (value > 50) {
            $ppc.addClass('gt-50');
        }

        $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-percents span').html(value + '%');

        if (value == max) {
            clearInterval(animate);
        }
    };

    var animate = setInterval(function() {
        loading();
    }, time);
});
/* Pie Chart */
.progress-pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #E5E5E5;
    position: relative;
}

.progress-pie-chart.gt-50 {
    background-color: #81CE97;
}

.ppc-progress {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 200px, 200px, 100px);
}

.ppc-progress .ppc-progress-fill {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 100px, 200px, 0);
    background: #81CE97;
    transform: rotate(60deg);
}

.gt-50 .ppc-progress {
    clip: rect(0, 100px, 200px, 0);
}

.gt-50 .ppc-progress .ppc-progress-fill {
    clip: rect(0, 200px, 200px, 100px);
    background: #E5E5E5;
}

.ppc-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 173.91304px / 2);
    top: calc(50% - 173.91304px / 2);
    width: 173.91304px;
    height: 173.91304px;
    background: #fff;
    text-align: center;
    display: table;
}

.ppc-percents span {
    display: block;
    font-size: 2.6em;
    font-weight: bold;
    color: #81CE97;
}

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.progress-pie-chart {
    margin: 50px auto 0;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="bar_container">
    <div id="main_container">
        <div id="pbar" class="progress-pie-chart" data-percent="0">
            <div class="ppc-progress">
                <div class="ppc-progress-fill"></div>
            </div>
            <div class="ppc-percents">
                <div class="pcc-percents-wrapper">
                    <span>%</span>
                </div>
            </div>
        </div>
        <progress style="display: none" id="progress_bar" value="0" max="100"></progress>
    </div>
</div>

Upvotes: 2

Views: 1780

Answers (2)

sergdenisov
sergdenisov

Reputation: 8572

I changed this:

if (value == max) {
   clearInterval(animate);
}

to:

if (value == max) {
    value = 0;
    $ppc.removeClass('gt-50');
}

Code snippet:

$(document).ready(function() {
    var progressbar = $('#progress_bar');
    max = progressbar.attr('max');
    time = (1000 / max) * 5;
    value = progressbar.val();

    var loading = function () {
        value += 1;
        addValue = progressbar.val(value);

        $('.progress-value').html(value + '%');
        var $ppc = $('.progress-pie-chart'),
            deg = 360 * value / 100;
        if (value > 50) {
            $ppc.addClass('gt-50');
        }

        $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-percents span').html(value + '%');

        if (value == max) {
            value = 0;
            $ppc.removeClass('gt-50');
        }
    };

    var animate = setInterval(function () {
        loading();
    }, time);
});
/* Pie Chart */
.progress-pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #E5E5E5;
    position: relative;
}

.progress-pie-chart.gt-50 {
    background-color: #81CE97;
}

.ppc-progress {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 200px, 200px, 100px);
}

.ppc-progress .ppc-progress-fill {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 100px, 200px, 0);
    background: #81CE97;
    transform: rotate(60deg);
}

.gt-50 .ppc-progress {
    clip: rect(0, 100px, 200px, 0);
}

.gt-50 .ppc-progress .ppc-progress-fill {
    clip: rect(0, 200px, 200px, 100px);
    background: #E5E5E5;
}

.ppc-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 173.91304px / 2);
    top: calc(50% - 173.91304px / 2);
    width: 173.91304px;
    height: 173.91304px;
    background: #fff;
    text-align: center;
    display: table;
}

.ppc-percents span {
    display: block;
    font-size: 2.6em;
    font-weight: bold;
    color: #81CE97;
}

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.progress-pie-chart {
    margin: 50px auto 0;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="bar_container">
    <div id="main_container">
        <div id="pbar" class="progress-pie-chart" data-percent="0">
            <div class="ppc-progress">
                <div class="ppc-progress-fill"></div>
            </div>
            <div class="ppc-percents">
                <div class="pcc-percents-wrapper">
                    <span>%</span>
                </div>
            </div>
        </div>
        <progress style="display: none" id="progress_bar" value="0" max="100"></progress>
    </div>
</div>

Update. Improved code snippet (see comments):

$(document).ready(function() {
    var progressbar = $('#progress_bar');
    max = parseInt(progressbar.attr('max'), 10);
    time = (1000 / max) * 5;
    value = progressbar.val();

    var loading = function() {
        var $ppc = $('.progress-pie-chart');
        if (value >= max) {
            value = 0;
            $ppc.removeClass('gt-50');
        } else {
            value += 1;
        }

        addValue = progressbar.val(value);

        $('.progress-value').html(value + '%');
        var deg = 360 * value / 10;
        if (value > 5) {
            $ppc.addClass('gt-50');
        }

        $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-ball').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-percents span').html(value + '%');
    };

    setInterval(loading, time);
});
/* Pie Chart */
.progress-pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #E5E5E5;
    position: relative;
}

.progress-pie-chart.gt-50 {
    background-color: #81CE97;
}

.ppc-progress {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 200px, 200px, 100px);
}

.gt-50 .ppc-progress {
    clip: rect(0, 100px, 200px, 0);
}

.ppc-progress-fill {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 100px, 200px, 0);
    background: #81CE97;
}

.ppc-ball {
    position: absolute;
    width: 200px;
    height: 200px;
}

.ppc-ball:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: blue;
    top: -7px;
    left: 85px;
}

.gt-50 .ppc-progress-fill {
    clip: rect(0, 200px, 200px, 100px);
    background: #E5E5E5;
}

.ppc-percents {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 173.91304px / 2);
    top: calc(50% - 173.91304px / 2);
    width: 173.91304px;
    height: 173.91304px;
    background: #fff;
    text-align: center;
    display: table;
}

.ppc-percents span {
    display: block;
    font-size: 2.6em;
    font-weight: bold;
    color: #81CE97;
}

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.progress-pie-chart {
    margin: 50px auto 0;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="bar_container">
    <div id="main_container">
        <div id="pbar" class="progress-pie-chart" data-percent="0">
            <div class="ppc-progress">
                <div class="ppc-progress-fill"></div>
            </div>
            <div class="ppc-percents">
                <div class="pcc-percents-wrapper">
                    <span>0%</span>
                </div>
            </div>
            <div class="ppc-ball"></div>
        </div>
        <progress style="display: none" id="progress_bar" value="0" max="10"></progress>
    </div>
</div>

Upvotes: 1

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

I am not exactly sure as to why you would want to run it again but anyway, check out the snippet below.

Basically, there is an iteration variable and a maxIteration variable introduced here. maxIteration is the maximum number of iteration you want to perform, I have set it to 1 here. And iteration is the variable whose value gets incremented per loop. So, at the end of the loop, there is a condition which checks if iteration < maxIteration to continue else stop.

Snippet:

$(document).ready(function() {
  var iteration = 0;
  var maxIteration = 1;
  var progressbar = $('#progress_bar');
  var $ppc = $('.progress-pie-chart');
  var progressValue = $('.progress-value');
  var max = progressbar.attr('max');
  var time = (1000 / max) * 5;
  var value = progressbar.val();
  var deg = 360 * value / 100;
  var loading = function() {
    value += 1;
    addValue = progressbar.val(value);
    progressValue.html(value + '%');
    deg = 360 * value / 100;
    if (value > 50) { $ppc.addClass('gt-50'); }
    $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-percents span').html(value + '%');
    if (value == max) {
      if (iteration < maxIteration) {
        $ppc.removeClass('gt-50');
        iteration += 1;
        value = 0;
        loading();
      } else {
        clearInterval(animate);
      }
    }
  };
  var animate = setInterval(function() {
    loading();
  }, time);
});
.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 { background-color: #81CE97; }
.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress { clip: rect(0, 100px, 200px, 0); }
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.progress-pie-chart { margin: 50px auto 0; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bar_container">
  <div id="main_container">
    <div id="pbar" class="progress-pie-chart" data-percent="0">
      <div class="ppc-progress">
        <div class="ppc-progress-fill"></div>
      </div>
      <div class="ppc-percents">
        <div class="pcc-percents-wrapper">
          <span>%</span>
        </div>
      </div>
    </div>
    <progress style="display: none" id="progress_bar" value="0" max="100"></progress>
  </div>
</div>

Hope this helps.

Update #1:

It should be easier to make the progress only reach a max of 10. Here is what has changed from the previous Snippet above:

  • The deg is calculated by dividing it by max variable instead of the previous fixed value of 100.
  • The if clause checking for mid-point to apply the gt-50 class now calculates by taking max * 0.5 i.e. half of the max value.
  • The rotate(60deg) value has been changed to rotate(0deg) in CSS to start by 0 progress.

Take a look at the snippet below:

$(document).ready(function() {
  var iteration = 0;
  var maxIteration = 1;
  var progressbar = $('#progress_bar');
  var $ppc = $('.progress-pie-chart');
  var progressValue = $('.progress-value');
  var max = progressbar.attr('max');
  var time = (1000 / max) * 5;
  var value = progressbar.val();
  var deg = 360 * value / max;
  var loading = function() {
    value += 1;
    addValue = progressbar.val(value);
    progressValue.html(value + '%');
    deg = 360 * value / max;
    if (value > max * 0.5) { $ppc.addClass('gt-50'); }
    $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-percents span').html(value + '%');
    if (value == max) {
      if (iteration < maxIteration) {
        $ppc.removeClass('gt-50');
        iteration += 1;
        value = 0;
        loading();
      } else {
        clearInterval(animate);
      }
    }
  };
  var animate = setInterval(function() {
    loading();
  }, time);
});
.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 { background-color: #81CE97; }
.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(0deg);
}
.gt-50 .ppc-progress { clip: rect(0, 100px, 200px, 0); }
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.progress-pie-chart { margin: 50px auto 0; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bar_container">
  <div id="main_container">
    <div id="pbar" class="progress-pie-chart" data-percent="0">
      <div class="ppc-progress">
        <div class="ppc-progress-fill"></div>
      </div>
      <div class="ppc-percents">
        <div class="pcc-percents-wrapper">
          <span>%</span>
        </div>
      </div>
    </div>
    <progress style="display: none" id="progress_bar" value="0" max="10"></progress>
  </div>
</div>

Upvotes: 0

Related Questions