ПРОГРЕСС БАР

ПРОГРЕСС БАР БЕЗ UI

by yoowordpress

HTML

<div class="meter">
	<span style="width: 35%">&nbsp;&nbsp;&nbsp;dddd<b data-num="35" class="num"></b></span>
</div>
<div class="meter">
	<span style="width: 25%">&nbsp;&nbsp;&nbsp;fff<b data-num="25" class="num"></b></span>
</div>
<div class="meter">
	<span style="width: 99%">&nbsp;&nbsp;&nbsp;gggg<b data-num="99" class="num"></b></span>
</div>

CSS

.meter {
    background-color: transparent;
    height: 35px;
    position: relative;
    border: 1px solid gray;
    margin: 5px;
}

.meter > span {
    background-color: #4679BD;
    color: #FFFFFF;
    display: block;
    font-size: 19px;
    height: 100%;
    line-height: 2;
    overflow: hidden;
    position: relative;
}

.num{
    float:right;
}

JavaScript

//animate progress bar line
$(".meter > span").each(function() {
	$(this)
		.data("origWidth", $(this).width())
		.width(0)
		.animate({
			width: $(this).data("origWidth")
		}, 1500);
});

//animate progress bar procents
$("b.num").each(function() {
    $(this)
        .data("nums", $(this).attr('data-num'))
        .animate({ 
            num: $(this).data("nums")
        },{
            duration: 1500,
            step: function (num){
                this.innerHTML = (num).toFixed() + '%&nbsp;&nbsp;&nbsp;'
            }
       });
 })