如何在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