CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Manzer A
Manzer A

Reputation: 3826

Progress bar loader at the top of div using javascript / jquery

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>

Upvotes: 0

Views: 1841

Answers (1)

showdev
showdev

Reputation: 29178

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:

  1. Configure a paceOptions variable 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>

  2. 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

Upvotes: 2

Related Questions