Wifeo Creative Code

<<< back to homepage for others creatives tricks

JQUERY PROGRESS BAR

ADVANCEMENT

Complete my informations :

1 %

Complete my town :

1 %

Complete my options :

1 %

Complete my links :

1 %

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="gbeQqQ" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/gbeQqQ'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/58-jquery-progress-bar.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.conteneur_progess_bar{
	width:200px; 
	height:15px;
	background-color:#f7f7f7;
	border:1px solid #e7e7e7;
	display:inline-block;
}

.progress_bar{
	background-color:#cb2025;
	width:1%;
	height:11px;
	border:2px solid #f7f7f7;
	
}

.pourcent{
	color:#cb2025;
	font-weight:500;
	font-size:20px;
	margin-left:10px;
}

JAVASCRIPT CODE :

$( document ).ready(function() {
  $( ".progress_bar" ).each(function() {
		var pourcent = parseInt($( this ).attr("pourcent"));
		
if(pourcent<35)
{
	$(this ).delay(300).animate({width: "+="+pourcent+"%"}, 500 );
}
else if(pourcent<100)
{
$(this ).delay(300).animate({width: "+=35%"}, 500 );
			
$(this ).animate({width: "+="+(pourcent-35)+"%",  backgroundColor: "#E9AF3E"}, 300 );
}
else if(pourcent==100)
{
$(this ).delay(300).animate({width: "+=35%"}, 500 )
   .animate({width: "+=35%",  backgroundColor: "#E9AF3E"}, 300 )
   .animate({width: "+=27%",  backgroundColor: "#7dc323"}, 300 );
}
});
	
	
	
$( ".pourcent" ).each(function() {
	var pourcent = parseInt($( this ).attr("pourcent"));
	var id = $( this ).attr("id");
		
var fonction_augmente = function(){
  var valeur = parseInt($( "#"+id).html());
              
  if(valeur==pourcent)
  {
    clearInterval(fonction_augmente);
  }
   else
  {
      
    $( "#"+id ).html(valeur+1);
    if(valeur==34)
    {
       $( "#"+id ).css("color", "#E9AF3E");
       $( "#f"+id ).css("color", "#E9AF3E");
    }
    else if(valeur==99)
    {
       $( "#"+id ).css("color", "#7dc323");
       $( "#f"+id ).css("color", "#7dc323");
    }
  }
  
}, 10);
  
});
});

HTML CODE :

<div align="center">
<div style="padding:10px; border:1px solid #e7e7e7;width:270px;
                background-color:#ffffff;" align="left">
<div style="margin-bottom:10px;margin-top:15px; text-align:center;
                     font-size:22px; font-weight:100; color:#333333;">ADVANCEMENT</div>
<div style="padding-bottom:20px; border-bottom:1px solid #e7e7e7;">
</div>
        
<div style="margin-bottom:10px;margin-top:15px;">Complete my informations : </div>
<div style="padding-bottom:20px; border-bottom:1px solid #e7e7e7;">
<div class="conteneur_progess_bar"><div class="progress_bar" pourcent="70" ></div></div>
<div style="display:inline-block;"><span class="pourcent" id="p1" pourcent="70">1</span>
<span id="fp1" style="color:#cb2025;">%</span></div>
</div>
<div style="margin-bottom:10px;margin-top:15px;">Complete my town : </div>
<div style="padding-bottom:20px; border-bottom:1px solid #e7e7e7;">
<div class="conteneur_progess_bar"><div class="progress_bar" pourcent="100" ></div></div>
<div style="display:inline-block;"><span class="pourcent" id="p2" pourcent="100">1</span>
<span id="fp2" style="color:#cb2025;">%</span></div>
</div>
<div style="margin-bottom:10px;margin-top:15px;">Complete my options :</div>
<div style="padding-bottom:20px; border-bottom:1px solid #e7e7e7;">
<div class="conteneur_progess_bar"><div class="progress_bar" pourcent="20" ></div></div>
<div style="display:inline-block;"><span class="pourcent" id="p3" pourcent="20">1</span>
<span id="fp3" style="color:#cb2025;">%</span></div>
</div>
<div style="margin-bottom:10px;margin-top:15px;">Complete my links :</div>
<div style="padding-bottom:20px;">
<div class="conteneur_progess_bar"><div class="progress_bar" pourcent="50" ></div></div>
<div style="display:inline-block;"><span class="pourcent" id="p4" pourcent="50">1</span>
<span id="fp4" style="color:#cb2025;">%</span></div>
</div>
</div>
</div>