如何在WordPress中新增CSS進度條（無需jQuery或JavaScript）

最近有一個專案，我需要一些簡單的動畫進度條，但我不想影響網站的效能，也不想再安裝一個 WordPress 外掛。於是我開始尋找一種不需要 JavaScript 或 jQuery 的 CSS 解決方案，幸好我找到了一個不錯的解決方案。

下面是完成後的預覽效果。你可以根據自己的喜好調整大小、顏色、填充寬度等。它的速度快如閃電，在側邊欄中效果極佳，還能滿足移動裝置的需求。

感謝最初發布程式碼的 cherryflavourpez。我只是稍微改動了一下。下面是你需要的 HTML 程式碼。您可以在 WordPress 區塊編輯器的 HTML 程式碼塊中輸入這些內容。

HTML

<div>
<span style="width:100%;"><span><span>Text inside bar</span></span></span>
</div>
<div>
<span style="width:25%;"><span></span></span>
</div>
<div>
<span style="width:49%;"><span></span></span>
</div>

CSS

下面是您需要的 CSS。您可以在 HTML 程式碼塊、WordPress 定製器或 GeneratePress 等主題的元素/鉤子中輸入。

.meter {
height: 30px;
position: relative;
background: #f3efe6;
border-radius: 3px;
overflow: hidden;
margin: 5px 0 5px 0;
}
.meter span {
display: block;
height: 100%;
}
.progress {
-webkit-animation: progressBar 3s ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation: progressBar 3s ease-in-out;
-moz-animation-fill-mode: both;
}
.pg-green {
background-color: #5db873;
}
.pg-orange {
background-color: #fd761f;
}
.pg-yellow {
background-color: #fabd52;
}
@-webkit-keyframes progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@-moz-keyframes progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.pg-text {
margin: 0 5px;
line-height: 30px;
color: #ffffff;
font-weight: 700;
}

小結

程式碼有用嗎？如果有，請在下面留言。分享您是如何調整程式碼使其更適合您的網站的。