HTML5 Fortschrittsbalken mit gleich großen Blöcken

Question

Ich möchte einen exakten Fortschrittsbalken entwerfen, der unten mit HTML5 und CSS3 angegeben wird. Jede Hilfe wäre willkommen. Danke im Voraus.

Progress bar with blocks

Answer 1

.bar { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
.bar-block { 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 4%; 
 
    height: 20px; 
 
} 
 
.bar-block:first-child { 
 
    border-radius: 5px 0 0 5px; 
 
} 
 
.bar-block:last-child { 
 
    border-radius: 0 5px 5px 0; 
 
} 
 
.bar-block:nth-last-child(-n+4) { 
 
    background-color: #ccc; 
 
} 
 
.bar-block:nth-last-child(-n+3) { 
 
    background-color: #eee; 
 
}

<div class="bar"> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
    <div class="bar-block"></div> 
 
</div>