Progress bar loader at the top of div using javascript / jquery
Question
I am trying to add a progress bar(similar to the pace.js progress bar). The issue is when browser is refreshed, pace.js progressbar is loading on the top of body, not on the top of div . The loader should not load on browser refresh but on click of button and inside div at the top.
The objective is to achieve loader like - when we login to Google; there is a progress bar at the top. I am trying to achieve similar functionality.
I have tried using pace.js . However, if some other more configurable and flexible library is available, it is welcomed in order to solve problem.
function createDiv(event) { event.target.disabled = true; var html = ''; html += '<div id="paceProgressBarBox" style="background:#ccc;width:200px;height:200px;"></div>'; $('#myDiv').append(html) // add pace progress bar at the top of id="paceProgressBarBox" and stop pace progress bar loading on browser referesh // instead show pace progress bar on click of button var pace; pace.options.target = '#paceProgressBarBox'; pace.start(); }
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive {} .pace .pace-progress { background: #2299dd; position: relative; z-index: 2000; right: 100%; width: 100%; height: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"> </script> <br/> <button onclick="createDiv(event)">Change Content</button> <div id="myDiv" style="width:200px;height:200px;"></div>
1 answers
solution1
2 ACCPTED 2019-03-05 18:53:55
The <body> element is hard-coded into pace.js as the element to which the progress bar is attached.
However, you can override it with the target setting (which doesn't seem to appear in the documentation ).
There are two ways to set the target :
Configure a
paceOptionsvariable before loading the pace script:paceOptions = { target: '#myDiv' }Working example:
#myDiv { width: 200px; height: 200px; } .pace .pace-progress { position: relative; background: #2299dd; z-index: 2000; right: 100%; width: 100%; height: 5px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> paceOptions = { target: '#myDiv' } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"> </script> <button>Change Content</button> <div id="myDiv"></div>Configure the progress bar in its
<script>tag:<script src=".../pace.js" data-pace-options='{ "target": "#myDiv" }'></script>Working example:
#myDiv { width: 200px; height: 200px; } .pace .pace-progress { position: relative; background: #2299dd; z-index: 2000; right: 100%; width: 100%; height: 5px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js" data-pace-options='{ "target": "#myDiv" }'> </script> <button>Change Content</button> <div id="myDiv"></div>
For reference, see:
Pace Configuration
Specify Location of Indicator
Edit:
To prevent Pace from starting automatically upon page load, set the startOnPageLoad setting to false :
jQuery('#changeContent').on('click', createDiv);
#myDiv { width: 200px; height: 200px; } .pace .pace-progress { position: relative; background: #2299dd; z-index: 2000; right: 100%; width: 100%; height: 5px; } #paceProgressBarBox { background: #ccc; width: 200px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> var paceOptions = { 'startOnPageLoad': false, 'target': '#paceProgressBarBox' } function createDiv(event) { event.target.disabled = true; var $progBarBox = $('<div>', { 'id': 'paceProgressBarBox' }); $('#myDiv').append($progBarBox); Pace.start(); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"> </script> <button id="changeContent">Change Content</button> <div id="myDiv"></div>
Also see:
Pace's source code for a full list of options
How to stop pace js plugin to run on page load
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.