最近有一个项目，需要一些简单的动画进度条，但不想损害网站的性能或安装另一个 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;}

概括

代码有帮助吗？如果是这样，请随时在下面发表评论。分享您如何调整它以更好地适合您的网站。