I have encountered an issue with my basic progress bar. It seems to work fine when I include only one progress element in my HTML page. However, if I add another one, the first one works as expected while the second one does not.
You can view my code on Codepen
HTML:
<div class="ani-progressbar">
<div class="fill-progress" kac-puan="8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="ani-progressbar">
<div class="fill-progress" kac-puan="10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
CSS:
.ani-progressbar{
width:100%;
height:5px;
margin-bottom:10px;
}
.fill-progress span{
display:block;
width:5px;
height:5px;
border:1px solid #9ad204;
float:left;
margin-left:1px;
}
jQuery:
$(document).ready(function(){
var getVal = $(".ani-progressbar .fill-progress").attr("kac-puan");
$(".ani-progressbar .fill-progress span").slice(0,getVal).each(function(index,element){
$(this).css("background","#9ad204");
});
});