.progressbar {
width: 100%;
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
.progress {
background-color: #5cb85c;
height: 20px;
&-0 {
width: 0%;
}
&-20 {
width: 20%;
}
&-40 {
width: 40%;
}
&-60 {
width: 60%;
}
&-80 {
width: 80%;
}
&-100 {
width: 100%;
}
}
}
html
<div class="progressbar">
<div class="progress progress-0">
<div class="progressbar">
<div class="progress progress-20">
<div class="progressbar">
<div class="progress progress-40">
<div class="progressbar">
<div class="progress progress-60">
イメージ