如何在 WordPress 中添加 CSS 进度条(无 jQuery 或 JavaScript)
最近有一个项目，需要一些简单的动画进度条，但不想损害网站的性能或安装另一个 WordPress 插件。因此，开始寻找一种无需 JavaScript 或 jQuery 的 CSS 解决方案，幸运的是找到了一个很棒的解决方案。
这是完成后的外观预览。您可以根据自己的喜好调整大小、颜色、填充宽度等。它速度快如闪电，在侧边栏中运行良好，并且对移动设备具有响应能力。
栏内文字
感谢最初发布代码的cherryflavorpez。我只是稍微改变了一下。以下是您需要的 HTML。您可以在 WordPress 块编辑器的 HTML 代码块中输入此内容。
超文本标记语言
<div class="meter"> <span style="width:100%;"><span class="progress pg-green"><span class="pg-text">Text inside bar</span></span></span></div><div class="meter"> <span style="width:25%;"><span class="progress pg-yellow"></span></span></div><div class="meter"> <span style="width:49%;"><span class="progress pg-orange"></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;}概括
代码有帮助吗？如果是这样，请随时在下面发表评论。分享您如何调整它以更好地适合您的网站。
