How to create a dynamic page loading progress bar using HTML, CSS and jQuery

How to create a dynamic page loading progress bar using HTML, CSS and jQuery

In web development, the page loading progress bar is a common feature that can Let users clearly understand the page loading process and improve user experience. In this article, we will introduce how to use HTML, CSS and jQuery to create a dynamic page loading progress bar, and provide specific code examples.

1. HTML structure

First, we need to add a container to display the progress bar in HTML. At the beginning of the tag, add the following code:

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>

Among them, progress-bar-container is the class name of the container, used to set The position and style of the progress bar; progress-bar is the class name of the progress bar, used to set the animation effect of the progress bar.

2. CSS Style

Next, we need to use CSS to beautify the progress bar. In the <style> tag, add the following code:

.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0;
  transition: width 0.3s ease;
}

Here we set the width of the progress bar container to 100%, the height to 5px, and set the background color; progress bar The height is 100%, the background color is green, and the width is set to 0. Using CSS transition effects, there is a smooth transition animation when the width changes.

3. jQuery code

Finally, we use jQuery to achieve the dynamic effect of the progress bar. In the <script> tag, add the following code:

$(window).on('load', function() {
  var progressBar = $('.progress-bar');
  var progressBarContainer = $('.progress-bar-container');
  var max = $(document).height() - $(window).height();
  var value = 0;

  progressBarContainer.slideDown(300);

  $(document).on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  $(window).on('resize', function() {
    max = $(document).height() - $(window).height();
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  progressBarContainer.fadeOut(300);
});

The above code first obtains the jQuery object of the progress bar and progress bar container, and then calculates the maximum height that the page can scroll. And initialize the value of the progress bar to 0.

Next, by listening to the scroll event, obtain the current scroll position in real time and convert it into a percentage to change the width of the progress bar.

At the same time, by listening to the resize event, when the window size changes, the maximum height that the page can scroll is recalculated and the width of the progress bar is updated.

Finally, the progress bar container disappears by fading out after the page is loaded.

4. Usage method

After adding the above code to the corresponding location, save the file in the format of .html, and then open the file through the browser to see the page Dynamic effect of loading progress bar.

Summary

This article introduces how to use HTML, CSS and jQuery to create a dynamic page loading progress bar. By adding HTML structure, setting CSS styles, and combining jQuery's event listening and CSS transition effects, we can display the page loading process in real time and improve user experience.

Hope this article is helpful to you!

The above is the detailed content of How to create a dynamic page loading progress bar using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!