Progress bar - V2.2

Progress bar width Scss and Jquery

by Bouteille Dimitri

HTML

<div class="progress">
  <div class="progress-counter">
    <div class="progress-count" id="progress-counter">26%</div>
    <div class="progress-bar" style="width:30%" id="progressBar-update">
    </div>
      
    <div class="progress-info">Ajout de l'image de converture Ă  l'archive</div>
  </div>
</div>

<button id="progress">Progress</button>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

@keyframes fadeOut{
  0% {
    opacity : 0.5;
  }
  50% {
    opacity : 1;
  }
  100% {
    opacity : 1;
  }
}

body{
 font-family: 'Roboto', sans-serif;
}

.progress{
  background: #fff;
  display: flex;
  height: 100vh;
  padding: 0 60px;
  &-count, &-info{
    position: absolute;
    left:0;
    right: 0;
    text-align:center;
  }
  &-info{
    top:100%;
    margin-top: 20px;
    font-size: 13px;
    color: rgb(180,180,180);
  }
  &-count{
    color: rgb(180,180,180);
    font-size:40px;
    letter-spacing: 1px;
    font-weight:200;
    bottom: 100%;
    margin-bottom:20px;
  }
  
  
  &-counter{
    margin: auto;
    width:100%;
    height: 22px;
    background: rgb(240,240,240);
    border-radius: 11px;
    position:relative;
  }
  &-bar{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    content:"";
    background: rgb(58, 123, 213);
    background: linear-gradient(to right, rgb(0, 210, 255), rgb(58, 123, 213));
    display: block;
    border-radius: 11px;
    animation-duration: 1.2s;
    animation-name: fadeOut;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

JavaScript

$("#progress").click(function(){
var nextSize = 100,
		$el = $("#progressBar-update"),
		currentSize = $el.width(),
    parentWidth = $el.parent().width(),
    percent = Math.round((currentSize / parentWidth) * 100);
      
  $({someValue: percent}).animate({someValue: nextSize}, {
      duration: 600,
      easing:'swing',
      step: function() {
      		var stepSize = Math.round(this.someValue)+"%";
          $("#progressBar-update").css('width', stepSize);
          $('#progress-counter').text(stepSize);
      }
  });
	//$("#progressBar-update").css('width', nextSize + '%');
  
  
  //$("#progressBar-update").find('.progress-count').text(size);
});