<header class="section-wrap header">
    <h1 class="title">progress bar</h1>
  </header>
<div class="wrapper">
  <div class="progress-bar"></div>
  <ul class="dots">
    <li class="active"><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

@import url('https://fonts.googleapis.com/css?family=Oxygen');
$f-OX: 'Oxygen', sans-serif;
$c-purple: #4a00d6;
$c-yellow: #fff555;

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  font-family: $f-OX;
  color: $c-purple;
}
li{
  list-style: none;
}

//レイアウト
.section-wrap{
  padding: 3%;
}

//コンテンツエリア
.wrapper{
  max-width: 960px;
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
}

//ヘッダー
.header{
  text-align: center;
  .title{
    position: relative;
    font-weight: bold;
    font-size: 50px;
    letter-spacing: .1em;
    color: $c-purple;
  }
}

//フッター
.footer{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.progress-bar{
  position: relative;
  width: 100%;
  height: 80px;
  padding: 4px 8px;
  background: $c-purple;
  border-radius: 3px;
  margin-top: 10px;
  .inner{
    display: inline-block;
    width: 0;
    height: 100%;
    background: $c-yellow;
    border-radius: 2px;
    transition: width .3s linear;
  }
  .num{
    position: absolute;
    top: -32px;
    font-size: 20px;
    font-weight: bold;
    &.min{
      left: -8px;
    }
    &.max{
      right: -8px;
    }
  }
}
.dots{
  display: flex;
  justify-content: center;
  margin-top: 3em;
  li{
    width: 15px;
    height: 15px;
    + li{
      margin-left: .5em;
    }
    a{
      display: block;
      width: 100%;
      height: 100%;
      background: $c-purple;
      border-radius: 50%;
      transition: all .3s linear;
    }
    &.active{
      a{
        background: $c-yellow;
        border: 2px solid $c-purple;
      }
    }
  }
}

function progressBar (progressBar, dotWrap) {
  const bar = document.querySelector(progressBar),
        dots = document.querySelector(dotWrap).children;
  
  let dotsSum = dots.length,
      width = 100 / dotsSum,
      progress = 1;
  
  bar.insertAdjacentHTML('beforeend', '<span class="inner"></span>');
  bar.insertAdjacentHTML('beforeend', '<span class="num min">01</span>');
  bar.insertAdjacentHTML('beforeend', '<span class="num max"></span>');
  
  const min = document.querySelector('.min'),
        max = document.querySelector('.max'),
        inner = document.querySelector('.progress-bar .inner');
  
  if(dotsSum < 10){
    max.textContent = '0' + dotsSum
  } else {
    max.textContent = dotsSum
  }
  
  changeBarWidth();
  
  for(let i = 0; i < dotsSum; i++){
    const dot = dots[i];
    
    dot.addEventListener('click', function(e){
      e.preventDefault();
      
      progress = i+ 1;
      
      changeBarWidth();

      for(let i = 0; i < dotsSum; i++){
        const dot = dots[i];
        
        dot.classList.remove('active');
      }
      
      dot.classList.add('active')
    });
  }
  
  function changeBarWidth () {
    inner.style.width = (width * progress) + '%';
  }
}

progressBar('.progress-bar', '.dots');