JSFiddle - React, Tailwind, and code Playground

by laetitia modine

HTML

<h3>1</h3>            
            <div class="barre">
                <div class="niveau" data-niv="90%"></div>
            </div>
          <h3>2</h3>             
            <div class="barre">
                <div class="niveau" data-niv="70%"></div>
            </div>
          <h3>3</h3>             
            <div class="barre">
                <div class="niveau" data-niv="60%"></div>
            </div>
      
        
	    <h3>4</h3> 
            <div class="barre">
                <div class="niveau" data-niv="75%"></div>
            </div>
         <h3>5</h3> 
            <div class="barre">
                <div class="niveau" data-niv="80%"></div>
            </div>
          <h3>6</h3> 
            <div class="barre">
                <div class="niveau" data-niv="95%"></div>
            </div>

CSS

.barre {
  width:400px; 
  height:10px; 
  background:#C8DFDF; 
  margin:20px 100px 100px 100px;
}
.niveau {
  height:10px; 
  background: #161E28;
  width:1px;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  transition: width 1s ease;
}

.data-niv {
  line-height:10px; 
  color: #161E28; 
  margin-left:10px; 
  font-size:10px;
   display: none;
}

JavaScript

$(function(){

	$(window).scroll(function(){
    	if($(window).scrollTop() > 30){
    	
    		/*console.log($(this).scrollTop());*/ 
            
			$('.niveau').each(function() {
				var valeur = $(this).data('niv');
				var data = $(this).html("<span class='data-niv'>"+valeur+"</span>");
				$(this).animate({
					width: valeur
				});
				
			});
			
		};
        
	});	
	
});