Ajax Loader
×

Percentage bar

percentage bars flat style.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

10 Comments

× New

Sign In to comment

elribga:

This is have a small problem.
100% can't count. so I modify this code.

// 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) && progress.siblings().children().css('width',pct);

wallytung24:

I really like the percentage bar, but I am new to javascript, css, and html.

I already setup a html and put all css and javascript in the same html. I also surround css with and surround javascript with .

But it only doesn't show the animation, but it has the css.

How do I import those javascript?

TheDawgLives:

I don't know if this counts as "elegant", but you can use this as the javascript and remove the wide transitions on the bars...
$('.bar-percentage[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 = Math.floor(this.countNum) + '%';
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});

Giuseppe Gerbino:

@Ondreas: that would be great. If anyone knows how to do it in an elegant manner... let me know.

Ondreas:

Really great snippet. One thing that could extend the awesomeness would be to make the percentage numeric value animate along with the bar. Right now it's static,only the bars animate. It's just a thought; still a great snippet.

RoboPetr:

Very nice! I'll probably use it in my new app!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+