Progress bar - V1.1

by Bouteille Dimitri

HTML

<div class="progress">
  <div class="progress-counter">
    <div class="progress-bar" style="width:100%">
      <div class="progress-info">100%</div>
    </div>    
  </div>
</div>

SCSS

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

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

.progress{
  background: #fff;
  display: flex;
  height: 100vh;
  padding: 0 60px;
  &-counter{
    margin: auto;
    width:100%;
    height: 22px;
    background: rgb(245,245,245);
    border-radius: 11px;
    position:relative;
    //overflow: hidden;
  }
  &-bar{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    content:"";
    background:linear-gradient(to right, rgb(52, 148, 230), rgb(236, 110, 173));
    display: block;
    border-radius: 11px;
  }
  &-info{
    z-index: 5;
    color: #fff;
    left:100%;
    background: rgb(30,30,30);
    top:100%;
    width:50px;
    margin-left: -25px;
    margin-top:8px;
    height:22px;
    border-radius: 11px;
    text-align:center;
    font-size:12px;
    line-height:22px;
    position: relative;
    letter-spacing: 1px;
    font-weight:500;
    &:after {
      bottom: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(13, 18, 20, 0);
      border-bottom-color: rgb(30,30,30);
      border-width: 5px;
      margin-left: -5px;
    }
  }
}