Progress bars with no jQuery as seen here: https://pennybros.com/

progress-bars-no-jquery.css

/*Progress bar CSS*/
.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 2s ease-in-out;
     -webkit-animation-fill-mode:both;
     -moz-animation: progressBar 2s 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;
}
/*Progress bar 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>