Wordpress News Hubb
Advertisement Banner
  • Home
  • WordPress News
  • WordPress Development
  • Contact
No Result
View All Result
  • Home
  • WordPress News
  • WordPress Development
  • Contact
No Result
View All Result
Gourmet News Hubb
No Result
View All Result
Home WordPress Development

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

admin by admin
September 9, 2022
in WordPress Development


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.



Source link

Previous Post

WordPress 6.0 Release Candidate 2 (RC2) Now Available for Testing – WordPress News

Next Post

Creating Recurring Revenue with Flywheel Growth Suite

Next Post

Creating Recurring Revenue with Flywheel Growth Suite

Recommended

How to Create a Landing Page With WordPress

3 months ago

How to Enable Search by Product SKU in WooCommerce

5 months ago

How to Sell Group Memberships in WordPress for Corporate Teams

4 months ago

Welcome Back, Bloganuary! – WordPress.com News

2 months ago

How to Add Google Web Stories to Your WordPress Site

3 months ago

Contributor Stories Live from WordCamp US! – WordPress News

5 months ago

© 2022 Wordpress News Hubb All rights reserved.

Use of these names, logos, and brands does not imply endorsement unless specified. By using this site, you agree to the Privacy Policy and Terms & Conditions.

Navigate Site

  • Home
  • WordPress News
  • WordPress Development
  • Contact

Newsletter Sign Up.

No Result
View All Result
  • Home
  • WordPress News
  • WordPress Development
  • Contact

© 2022 Wordpress News Hubb All rights reserved.