How to add CSS progress bars in WordPress (no jQuery or JS)

by

There was a project recently where I needed some simple animated progress bars, but I didn’t want to hurt the site’s performance or install yet another WordPress plugin. So I went hunting for a CSS solution without JavaScript or jQuery, and thankfully I found a great one.

CSS progress bars in WordPress with no jQuery

Here is a preview of how it looks when you’re finished. You can tweak the size, colors, fill width, etc., to your liking. It’s lightning fast, works great in a sidebar, and is responsive for mobile devices.

Text inside bar

Kudos to cherryflavourpez who originally posted the code. I just changed it a bit. Below is the HTML you’ll need. You can enter this in an HTML code block in the WordPress block editor.

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

Below is the CSS you’ll need. You can enter this in an HTML code block, the WordPress Customizer, or as an element/hook in a theme like 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;
}

Summary

Did the code help? If so, feel free to drop a comment below. Share how you might have tweaked it to work better for your site.

Leave a Comment