CSS を使用してプログレスバーと順序プログレスバーを実装する例

<div id="進捗">
    70%
</div>

＃進捗{
    幅: 50%; 
    高さ: 30px;
    境界線:1px実線 #ccc;
    境界線の半径: 15px;
    マージン: 50px 0 0 100px;
    オーバーフロー: 非表示;
    ボックスシャドウ: 0 0 5px 0px #ddd インセット;
}

#進捗状況スパン{
    表示: インラインブロック;
    幅: 70%;
    高さ: 100%;
    background: #2989d8; /* 古いブラウザ */
    背景: -moz-linear-gradient(45度, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
    背景: -webkit-gradient(linear, 左下, 右上, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome、Safari4+ */
    背景: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+、Safari 5.1+ */
    背景: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */
    背景: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */
    背景: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */
    フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* 水平グラデーションの IE6-9 フォールバック */
    背景サイズ: 60px 30px;
    テキスト配置: 中央;
    色:#fff;
}

<div id="プログレスバー">
     <!-- 進捗状況バー -->
     <div>
         <span></span>
     </div>
     <!-- 5 つの円 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

#プログレスバー{
    幅: 80%;
    高さ: 50px;
    位置: 相対的;
    マージン: 50px 0 0 100px;
}
#プログレスバー div{
    幅: 100%;
    高さ: 10px;
    位置: 絶対;
    上位:50%;
    左: 0;
    上マージン:-20px;
    境界線:1px実線 #ddd;
    背景: #ccc;
}
#progressBar div span {
    位置: 絶対;
    表示: インラインブロック;
    背景: 緑;
    高さ: 10px;
    幅: 25%;
}
#プログレスバー>span{
    位置: 絶対;
    トップ:0;
    上マージン: -10px;
    幅: 40px;
    高さ: 40px;
    境界線:2px実線 #ddd;
    境界線の半径: 50%;
    背景: 緑;
    左マージン: -20px;
    色:#fff;
}
#プログレスバー>span:nth-child(1){
    残り: 0%;
}
#プログレスバー>span:nth-child(2){
    左: 25%;
    背景：緑;
}
#プログレスバー>span:nth-child(3){
    左: 50%;
    背景:#ccc;
}
#プログレスバー>span:nth-child(4){
    左: 75%;
    背景:#ccc;
}
#プログレスバー>span:nth-child(5){
    左: 100%;
    背景:#ccc;
}