<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;
}
}
}
}
View Compiled
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');
This Pen doesn't use any external CSS resources.