// html 

     <div class="qodef-progress-bar ">
                          <h3 class="pb-title-holder" style="color: #000000">
                            <span class="pb-title">Adobe Photoshop</span>
                            <span class="qodef-pb-percent-holder">
                              <span class="qodef-pb-percent">{{ dynamic_page_hubdb_row.adobe_photoshop }}</span>
                              <span>%</span>
                            </span>
                          </h3>
                          <div class="qodef-pb-content-holder" style="background-color: #e1e1e1">
                            <div data-percentage="{{ dynamic_page_hubdb_row.adobe_photoshop }}" class="qodef-pb-content" style="background-color: #fe3e6b"></div>
                          </div>
                        </div>




// progress bar js 

(function() {

  var progressBar = {};
  window.progressBar = progressBar;

  progressBar.qodefInitProgressBars = qodefInitProgressBars;

  progressBar.qodefOnDocumentReady = qodefOnDocumentReady;
  document.addEventListener('DOMContentLoaded', qodefOnDocumentReady);

  /*
     All functions to be called on DOMContentLoaded should be in this function
     */
  function qodefOnDocumentReady() {
    qodefInitProgressBars();
  }

  /*
     ** Horizontal progress bars shortcode
     */
  function qodefInitProgressBars() {
    var progressBar = document.querySelectorAll('.qodef-progress-bar');

    if (progressBar.length) {
      progressBar.forEach(function(thisBar) {
        var thisBarContent = thisBar.querySelector('.qodef-pb-content');
        var percentage = thisBarContent.dataset.percentage;
        var percentageNumber = thisBar.querySelector('.qodef-pb-percent-holder');

        var appearEvent = new Event('appear');

        thisBar.addEventListener('appear', function() {
          qodefInitToCounterProgressBar(thisBar, percentage);

          thisBarContent.style.width = '0%';

          var animationStartTime = null;
          function animate(time) {
            if (!animationStartTime) animationStartTime = time;
            var progress = (time - animationStartTime) / 2000;
            if (progress > 1) progress = 1;
            thisBarContent.style.width = (percentage * progress) + '%';
            percentageNumber.style.left = (percentage - (percentageNumber.offsetWidth / thisBar.offsetWidth * 100)) + '%';
            if (progress < 1) requestAnimationFrame(animate);
          }
          requestAnimationFrame(animate);
        });

        thisBar.dispatchEvent(appearEvent);
      });
    }
  }

  /*
     ** Counter for horizontal progress bars percent from zero to defined percent
     */
  function qodefInitToCounterProgressBar(progressBar, percentage) {
    var percent = progressBar.querySelectorAll('.qodef-pb-percent-holder');

    if (percent.length) {
      percent.forEach(function(thisPercent) {
        thisPercent.style.opacity = '1';

        var pbPercent = thisPercent.querySelector('.qodef-pb-percent');

        var from = 0;
        var to = parseFloat(percentage);
        var speed = 2000;
        var refreshInterval = 50;
        var increment = (to - from) / (speed / refreshInterval);

        var current = from;
        var counter = setInterval(updateCounter, refreshInterval);

        function updateCounter() {
          current += increment;
          pbPercent.textContent = Math.floor(current);
          if (current >= to) {
            clearInterval(counter);
            pbPercent.textContent = to;
          }
        }
      });
    }
  }
})();