2

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>
sergdenisov
  • 8,327
  • 9
  • 48
  • 63
Dami
  • 167
  • 2
  • 3
  • 14

2 Answers2

1

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>
sergdenisov
  • 8,327
  • 9
  • 48
  • 63
  • thanx for getting me out of this problem – Dami Aug 19 '15 at 07:10
  • is it possible that a round ball also move with in front of green circle like a loader, if is it then it will also a helpful for my next project requirement. – Dami Aug 19 '15 at 07:13
  • and at percentage numbers only show 0 to 10 means start from 0 and end at 10 not at 100 – Dami Aug 19 '15 at 07:30
  • @user1937072 I don't understand about "a round ball also move with in front of green circle like a loader", explain in details please. – sergdenisov Aug 19 '15 at 08:49
  • @user1937072 and about "0 to 10", do you want to change only numbers and leave everything else as it is? – sergdenisov Aug 19 '15 at 08:51
  • i want look like this image http://simadahmed.deviantart.com/art/Untitled-1-554780497. small round at tip of green line and number only from 0 - 10, means start at 0 and end at 10 not at 100. – Dami Aug 19 '15 at 12:05
  • @user1937072 I added improved code snippet in my answer, check it out please. – sergdenisov Aug 19 '15 at 21:02
  • Thank-you sooo much for getting me out of this problem, i'm really thanks full to you. Good work. – Dami Aug 20 '15 at 04:37
  • @user1937072 I'm glad to help! – sergdenisov Aug 20 '15 at 08:42
  • sorry my requirement is littl bit changed . How to reduced it size, i mean complete loader animation size reduced to approx 20 or 30 %. And i want to run this loader on bootstrap carousel but my requirement is when my 3 carousel item active or 3 slide comes it'll start rotating and when 3 slide move away and 4 slide comes it'll stop, again start at 3rd and stop at 4th. – Dami Aug 21 '15 at 12:02
  • @user1937072 ask another question, describe what you want to achieve and show the code snippet with the problem. – sergdenisov Aug 21 '15 at 12:10
  • plx see my this question http://stackoverflow.com/questions/32140365/how-to-active-loader-at-bootstrap-carousel-3-item-active – Dami Aug 21 '15 at 12:44
  • i just simply want 2 things 1= reducing the size how to reduce this loader size. 2= it start on bootstrap 2 slide not start on page load like currently it start circulating on page load and it will stop when slide 3 start or active so when ever slide 2 start or active loader start circulating and stop circulating when slide 3 start or active. – Dami Aug 21 '15 at 12:50
  • please don't mind i know i'm asking question again and again but i'm newly started my career and i'm so weak in java-scripting. I hope you understand my problem plx don't mind and sorry for this. – Dami Aug 21 '15 at 12:54
  • @Dami it's OK, I'll see your question tomorrow. – sergdenisov Aug 21 '15 at 13:27
0

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>
Tahir Ahmed
  • 5,687
  • 2
  • 17
  • 28
  • yes your effort is too good. can you help me to move a blue ball in front of this green circle and percentage numbers show only from 0 - 10 not from 0 - 100 – Dami Aug 19 '15 at 07:34
  • it should be pretty easy to update the progress for a maximum of `10` instead of `100`. added an **Update #1** above regarding that. but not really sure about the "blue ball" animation you are talking about. – Tahir Ahmed Aug 19 '15 at 08:17