javascript - 继续运行进度条

Question

我想继续运行这个进度条，就像当 % 达到 100% 时它将再次从 0% 重新启动并从 0% 继续运行 到 100%，请在此处查看我的演示。

$(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>

Answer 1

我改变了这个:

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

到:

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

代码片段:

$(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>

更新。改进的代码片段(见评论):

$(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>