具有相同大小块的HTML5进度条

我想使用HTML5和CSS3设计一个精确的进度条，如下所示。任何帮助都将不胜感激。提前谢谢

.bar{
背景色：白色；
宽度：100%；
高度：20px；
}
.吧台{
背景颜色：绿色；
显示：内联块；
宽度：4%；
高度：20px；
}
.酒吧区：第一个孩子{
边界半径：5px 0 5px；
}
.酒吧区：最后一个孩子{
边界半径：0 5px 5px 0；
}
.bar块：第n个最后子级（-n+4）{
背景色：#ccc；
}
.bar块：第n个最后一个子项（-n+3）{
背景色：#eee；
}

请检查我的答案。谢谢。它也起作用。我尝试使用HTML元素。