如何在WordPress中添加CSS进度条（无需jQuery或JavaScript）
最近有一个项目，我需要一些简单的动画进度条，但我不想影响网站的性能，也不想再安装一个 WordPress 插件。于是我开始寻找一种不需要 JavaScript 或 jQuery 的 CSS 解决方案，幸好我找到了一个不错的解决方案。
下面是完成后的预览效果。你可以根据自己的喜好调整大小、颜色、填充宽度等。它的速度快如闪电，在侧边栏中效果极佳，知识兔还能满足移动设备的需求。
感谢最初发布代码的 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;}
下载仅供下载体验和测试学习，不得商用和正当使用。
