Loading indicator displayed at the top of a div using JavaScript/jQuery

Question

Loading indicator displayed at the top of a div using JavaScript/jQuery

My current challenge involves implementing a progress bar, similar to the pace.js progress bar. The issue arises when the browser is refreshed, as the pace.js progress bar loads on top of the body instead of within a specified div. It is important that the loader only appears upon clicking a button and is positioned at the top of a specific div.

I am striving to recreate the loading experience seen when logging into Google, where a progress bar animates at the top of the page. To achieve this functionality, I initially tried using pace.js. However, I am open to exploring other libraries that offer more customization options to solve this problem effectively.

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>

javascript jquery html css

Answer 1

Answer №1

In pace.js, the progress bar is initially attached to the <body> element by default.
However, you have the option to change this by using the undocumented target setting.

There are two ways to specify the target:

Create a paceOptions variable before loading the pace script:

paceOptions = {
  target: '#myDiv'
}

Example with CSS styles:

#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>

Specify the target in the <script> tag for the progress bar:

<script src=".../pace.js" data-pace-options='{ "target": "#myDiv" }'></script>

Example with CSS styles:

#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>

Additional resources:
Pace Configuration
Specify Location of Indicator

Edit:

To prevent Pace from automatically starting on 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>

Check out these links as well:
Pace's source code for more options
How to stop Pace JS plugin from running on page load

Answer 2

In pace.js, the progress bar is initially attached to the <body> element by default.
However, you have the option to change this by using the undocumented target setting.

There are two ways to specify the target:

Create a paceOptions variable before loading the pace script:

paceOptions = {
  target: '#myDiv'
}

Example with CSS styles:

#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>

Specify the target in the <script> tag for the progress bar:

<script src=".../pace.js" data-pace-options='{ "target": "#myDiv" }'></script>

Example with CSS styles:

#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>

Additional resources:
Pace Configuration
Specify Location of Indicator

Edit:

To prevent Pace from automatically starting on 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>

Check out these links as well:
Pace's source code for more options
How to stop Pace JS plugin from running on page load

Loading indicator displayed at the top of a div using JavaScript/jQuery

Answer №1

Edit:

Similar questions

Guide to attaching and displaying an image on a Three.js map

Prepare for a thorough cross-referencing session

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

The CSS focus-within and hover properties are not functioning as expected

How can we alert users when data has been updated without the need for a page

Using Angular service worker to pre-fetch video files

jQuery - Discovering the MAC address in a string and potentially styling it

Struggling to display the retrieved data on the webpage

An HTML attribute that functions like autofocus in the select tag

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

Executing ts-node scripts that leverage imported CSS modules

Encountered an error while running npm run dev on a NextJS application due to an

To view the previous or next image, simply click on the links and watch as the new image fades in seamlessly while maintaining

Nested loops with synchronous calls running in parallel

The behavior of -webkit-border-radius differs from that of -moz-border-radius

What is the process for setting up redux in _app.tsx?

What is the best way to delete rows from a table that was created using a JQuery AJAX response?

Embedding PHP script within HTML code can enhance website functionality and

The absence of the dark class in the body is still allowing the impactful influence of Tailwind

undefined event typescript this reactjs