如何在WordPress中添加CSS进度条（无需jQuery或JavaScript）

最近有一个项目，我需要一些简单的动画进度条，但我不想影响网站的性能，也不想再安装一个 WordPress 插件。于是我开始寻找一种不需要 JavaScript 或 jQuery 的 CSS 解决方案，幸好我找到了一个不错的解决方案。

下面是完成后的预览效果。你可以根据自己的喜好调整大小、颜色、填充宽度等。它的速度快如闪电，在侧边栏中效果极佳，还能满足移动设备的需求。

See the Pen
css-progress-bars-wordpress-no-jquery by Mr. Kwong (@Mr-Kwong)
on CodePen.

感谢最初发布代码的 cherryflavourpez。我只是稍微改动了一下。下面是你需要的 HTML 代码。您可以在 WordPress 区块编辑器的 HTML 代码块中输入这些内容。

HTML

Text inside bar

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;
}

小结

代码有用吗？如果有，请在下面留言。分享您是如何调整代码使其更适合您的网站的。

原文地址：https://www.wbolt.com/css-progress-bars-wordpress-no-jquery.html