Progress bar html code

yjadlaoui · ‎Jan 24, 2022

Hey there, the blog html's template don't accept the drag & drop modules , can someone please give me the "progress bar" html code please 🙂

thank you.

09112 · ‎Apr 15, 2022

Hi, I tried as well and nothing is changed, is there something else to do than creating the module and add it in the template?

Thank you

webdew · ‎Jan 25, 2022

Hi @yjadlaoui ,

Try the below code:

</div>

.progress {

width: 100%;

height: 50px;

}

.progress-wrap {

background: #f80;

margin: 20px 0;

overflow: hidden;

position: relative;

}

.progress-wrap .progress-bar {

background: #ddd;

left: 0;

position: absolute;

top: 0;

}

// on page load...

moveProgressBar();

// on browser resize...

$(window).resize(function() {

moveProgressBar();

});

// SIGNATURE PROGRESS

function moveProgressBar() {

console.log("moveProgressBar");

var getPercent = ($('.progress-wrap').data('progress-percent') / 100);

var getProgressWrapWidth = $('.progress-wrap').width();

var progressTotal = getPercent * getProgressWrapWidth;

var animationLength = 2500;

// on page load, animate percentage bar to data percentage length

// .stop() used to prevent animation queueing

$('.progress-bar').stop().animate({

left: progressTotal

}, animationLength);

}

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

Anton · ‎Jan 25, 2022

Hi @yjadlaoui,

this code should do it's job

HTML:

<div class="pBar">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

CSS:

.pBar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;{# change the background-color to the color of the "non-scrolled" progress bar #}
}

.progress-bar {
  height: 8px;
  background: #04AA6D; {# change the background-color to the color of the "scrolled" progress bar #}
  width: 0%;
}

JS:

/ When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

best,

Anton

yjadlaoui · ‎Jan 26, 2022

Hi @Anton thank you for replying , do you know where i should write the JS code exactly ? because i tried in multiple codes who are related to the blog and nothing changed 😕

Anton · ‎Jan 27, 2022

@yjadlaoui,

in my experience it's the best way to create a custom module with those code snippets and put each one in the corresponding place. Then you have to "just" place the module in the template and that's it. This works with everything.

If you're using themes you could also create a single JS file in your theme and link it either in the module or in the "layout.html"(the file where you define the <head> for example).

Another possible place to put it would be in the settings
Settings-->Website-->Pages-->website-header HTML(or footer HTML).

By doing so this part will be loaded with the {{standard_header_includes}} in your template.

best,

Anton

yjadlaoui · ‎Feb 1, 2022

Hello @Anton

Thank you for responding , so basically nothing really changed 😕 i sent you a detailed message of what i did exactly i hope you can figure out what actually is the problem.

Best regards

Yjadlaoui

CMS Development