|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
css實(shí)現(xiàn)的進(jìn)程跟蹤步驟進(jìn)度樣式條(橫向)
作者:admin 時(shí)間:2022-1-21 22:51:17 瀏覽:關(guān)于步驟進(jìn)度條，前面介紹過(guò)7款步驟進(jìn)度條實(shí)例。
進(jìn)程跟蹤步驟好處多多，例如訂單進(jìn)度跟蹤，可以清晰的向用戶(hù)顯示當(dāng)前訂單的完成進(jìn)度情況，本文給大家介紹一款進(jìn)程跟蹤步驟的樣式。
點(diǎn)擊“前一步”、“后一步”可以與界面進(jìn)行交互，在實(shí)際應(yīng)用中，點(diǎn)擊鼠標(biāo)的動(dòng)作將用程式來(lái)自動(dòng)實(shí)現(xiàn)。
HTML
<div class="progress-tracker"
role="progressbar"
aria-valuemin="1"
aria-valuemax="4"
aria-valuenow="1"
aria-live="polite">
<ol class="progress-tracker--steps" role="presentation">
<li class="progress-tracker--step -current"></li>
<li class="progress-tracker--step"></li>
<li class="progress-tracker--step"></li>
<li class="progress-tracker--step"></li>
</ol>
<div class="progress-tracker--bar" role="presentation"></div>
</div>
<button data-dir="back">前一步</button>
<button data-dir="forward">后一步</button>
進(jìn)程步驟樣式盒子是一個(gè)div，其class為progress-tracker。
可以更改aria-valuemax的屬性值，定義步驟有幾個(gè)節(jié)點(diǎn)。比如有5個(gè)步驟，則aria-valuemax的值設(shè)為5，相應(yīng)的在后面ol容器里加多一個(gè)li標(biāo)簽：<li class="progress-tracker--step"></li>。
CSS
.progress-tracker {
width: 600px;
position: relative;
}
.progress-tracker--steps {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding-left: 0;
position: relative;
list-style: none;
}
.progress-tracker--step {
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: black;
box-shadow: 0 0 0 2px white;
margin: 0;
padding: 0;
}
.progress-tracker--step.-current {
background-color: white;
box-shadow: 0 0 0 4px black inset, 0 0 0 2px white;
}
.progress-tracker--step.-current ~ .progress-tracker--step {
background-color: white;
box-shadow: 0 0 0 2px silver inset, 0 0 0 2px white;
}
.progress-tracker--bar {
align-self: center;
height: 2px;
width: calc(100% - 1rem);
margin-left: 0.5rem;
position: absolute;
top: calc(50% - 1px);
z-index: -1;
background-color: silver;
box-shadow: 0 0 0 2px white;
}.progress-tracker設(shè)置進(jìn)程條的位置及長(zhǎng)度。
.progress-tracker--step設(shè)置進(jìn)程條已完成步驟的顏色、形狀等樣式。例如下面的CSS
.progress-tracker--step {
width: 1rem; /* 寬*/
height: 1rem; /* 高 */
border-radius: 30%; /* 形狀 */
background-color: blue; /* 顏色 */
box-shadow: 0 0 0 2px white;
margin: 0;
padding: 0;
}得到的進(jìn)程條樣式如下圖所示：
.progress-tracker--step.-current 設(shè)置當(dāng)前步驟節(jié)點(diǎn)的樣式。例如下面CSS
.progress-tracker--step.-current {
background-color: blue; /* 顏色 */
box-shadow: 0 0 0 4px blue inset, 0 0 0 2px white;
}得到的進(jìn)程條樣式如下圖所示：
.progress-tracker--bar 設(shè)置整個(gè)進(jìn)度條的條形樣式。
Javascript
該實(shí)例需要用到JS代碼來(lái)實(shí)現(xiàn)交互。但無(wú)需用到第三方插件，包括jQuery庫(kù)文件。
您可能對(duì)以下文章也感興趣
標(biāo)簽: 步驟進(jìn)度條 進(jìn)度條
- 站長(zhǎng)推薦
