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

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.

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

  Text inside bar



  



  

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.