2
\$\begingroup\$

Basing my work on a JavaScript progress bar created by another person, I added an animated percentage count. This solution is really ugly but it works.

I don't know how to avoid having to declare the percentage value twice in the HTML. I would also like to unify the parts of the code responsible for the progress bar and the percentage counter.

// This part of the code is responsible for loading progress bar:

$('.progressbar').each(function() {
    $(this).find('.progressbar-bar').width(0);
});

$('.progressbar').each(function() {

    $(this).find('.progressbar-bar').animate({
        width: $(this).attr('data-percent')
    }, 2000);
});


// Part of the code responsible for loading percentages:

$('.progress-bar-percent[data-percentage]').each(function () {

        var progress = $(this);
        var percentage = Math.ceil($(this).attr('data-percentage'));

            $({countNum: 0}).animate({countNum: percentage}, {
                duration: 2000,
                easing:'linear',
                step: function() {
                // What todo on every count
                    var pct = '';
                    if(percentage == 0){
                        pct = Math.floor(this.countNum) + '%';
                    }else{
                        pct = Math.floor(this.countNum+1) + '%';
                    }
                    progress.text(pct);
                }
            });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Progressing">
    <!-- .progressbar -->
    <div class="progressbar clearfix" data-percent="95%">
        <div class="progressbar-title"><span>Something</span></div>
        <div class="progressbar-bar"></div>
        <div class="progress-bar-percent" data-percentage="95"></div>
    </div>

</div>

\$\endgroup\$
  • \$\begingroup\$ I'm voting to close this question as off-topic because it's asking for explanation instead of review. \$\endgroup\$ – Mast Jan 25 '16 at 17:02
  • \$\begingroup\$ @Mast Are you sure? "This solution is really ugly but it works." Also, there's a close reason for what you wrote; you didn't need a custom one. \$\endgroup\$ – Nic Hartley Jan 25 '16 at 23:38
  • 1
    \$\begingroup\$ @QPaysTaxes I'm very sure. I don't doubt whether it works, but OP isn't looking for a review. If you're not looking for a review, this is not the place to be. Explanations of your current code are off-topic, we assume you know why you're doing what you're doing when writing reviews. \$\endgroup\$ – Mast Jan 26 '16 at 6:00
  • \$\begingroup\$ @Mast "I made it but I think that the code can be optimized. Unfortunately, I do not know how to do it." suggests that OP is asking for help improving their code -- i.e. a review. \$\endgroup\$ – Nic Hartley Jan 26 '16 at 6:02
  • 1
    \$\begingroup\$ On first reading, the question made it look like Umtey didn't know how to solve the problem. On second reading, it became apparent that that impression was mostly due to the way the doubts and concerns were phrased. The working solution that is presented here seems good enough to me. \$\endgroup\$ – 200_success Jan 26 '16 at 7:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.