帶有步驟樣式的進度條

Question

如何設計我的進度條，使其看起來像設計？ 我試圖移動文字，但他們一直留在圈子里。 也不確定如何使用 css 在另一個圓點內創建圓。它應該是不可點擊的。 這是 css 和 html 文件。 也不確定如何讓活動/完成的步驟出現在勾號圖標中。

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>XXXXXX</title>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div id="progress">
    <div id="progress-bar"></div>
    <ul id="progress-text">
      <li class="step active">1</li>
      <li class="step">2</li>
      <li class="step">3</li>
      <li class="step">4</li>
      <li class="step">5</li>
    </ul>
  </div>
  <button id="progress-prev" class="btn" disabled>Prev</button>
  <button id="progress-next" class="btn">Next</button>
  <script src="./bar script.js"></script>
</body>

</html>

--------------------- css file

#progress {
  position: relative;
  margin-bottom: 30px;
}

#progress-bar {
  position: absolute;
  background: #4584ff;
  height: 5px;
  width: 0%;
  top: 50%;
  left: 0;
}

#progress-text {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

#progress-text::before {
  content: "";
  background-color: lightgray;
  position: absolute;
  top: 50%;
  left: 0;
  height: 5px;
  width: 100%;
  z-index: -1;
}

#progress-text .step {
  border: 3px solid lightgray;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

#progress-text .step.active {
  border-color: #4584ff;
  background-color: #4584ff;
  color: #fff;
  
}

.btn {
  background: lightgray;
  border: none;
  border-radius: 3px;
  padding: 6px 12px;
}

這是參考圖片

Answer 1

我希望這就是你的意思

 #progress { position: relative; margin-bottom: 30px; } #progress-bar { position: absolute; background: #4584ff; height: 5px; width: 0%; top: 50%; left: 0; } #progress-text { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; } #progress-text::before { content: ""; background-color: lightgray; position: absolute; top: 50%; left: 0; height: 5px; width: 100%; z-index: -1; } #progress-text.step { border: 3px solid lightgray; border-radius: 100%; width: 25px; height: 25px; line-height: 25px; text-align: center; background-color: #fff; font-family: sans-serif; font-size: 14px; position: relative; z-index: 1; } #progress-text.step.active { border-color: #4584ff; background-color: #4584ff; color: #4584ff; }.btn { background: lightgray; border: none; border-radius: 3px; padding: 6px 12px; } /* added css */ #progress-text.step { display:flex; justify-content:center; } #progress-text.step label{ margin-top:120%; font-size:.7rem; font-weight:bold; font-color:inherit; } #progress-text.step.active::after { content:"✓"; color:#fff; z-index:2; position:absolute; top:2px; left:8px; font-size:12px; font-weight:bold; } #progress-text.step.progress{ border-color:#4584ff; } #progress-text.step.progress::after{ content:"•"; transform:scale(3); position:absolute; left:10px; top:1.5px; color:#4584ff; } #progress-text.step.progress label{ color:#4584ff; }

 <div id="progress"> <div id="progress-bar"></div> <ul id="progress-text"> <li class="step active"> <label>Review</label> </li> <li class="step active"> <label>Assignment</label> </li> <li class="step progress"> <label>Investigation</label> </li> <li class="step"> <label>Handling</label> </li> <li class="step"> <label>Resolution</label> </li> </ul> </div> <button id="progress-prev" class="btn" disabled>Prev</button> <button id="progress-next" class="btn">Next</button>

帶有步驟樣式的進度條

問題描述

1 個解決方案

解決方案1
1 已采納 2023-01-26 21:47:42

帶有步驟樣式的進度條

問題描述

1 個解決方案

解決方案1 1 已采納 2023-01-26 21:47:42

解決方案1
1 已采納 2023-01-26 21:47:42