Comment créer une barre de progression de chargement de page dynamique en utilisant HTML, CSS et jQuery

Comment créer une barre de progression de chargement de page dynamique à l'aide de HTML, CSS et jQuery

Dans le développement Web, la barre de progression de chargement de page est une fonctionnalité courante, qui permet aux utilisateurs de comprendre clairement le processus de chargement de page et améliore l'expérience utilisateur. expérience. Dans cet article, nous présenterons comment utiliser HTML, CSS et jQuery pour créer une barre de progression de chargement de page dynamique et fournirons des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons ajouter un conteneur pour afficher la barre de progression en HTML. Au début de la balise , ajoutez le code suivant : 标签的最开始处，添加如下代码：

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

其中，progress-bar-container 是容器的类名，用于设置进度条的位置和样式；progress-bar 则是进度条的类名，用于设置进度条的动画效果。

二、CSS样式

接下来，我们需要使用CSS来美化进度条。在 <style></style> 标签中，添加如下代码：

.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;
}

这里我们设置了进度条容器的宽度为 100%，高度为 5px，并设置了背景颜色；进度条的高度为 100%，背景颜色为绿色，并设置了宽度为 0，使用 CSS 过渡效果，在宽度发生变化时有一个平滑的过渡动画。

三、jQuery代码

最后，我们使用jQuery来实现进度条的动态效果。在 <script></script> 标签中，添加如下代码：

$(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);
});

上述代码首先获取了进度条和进度条容器的jQuery对象，然后计算了页面可以滚动的最大高度，并初始化进度条的值为0。

接着，通过监听 scroll 事件，实时获取当前滚动的位置，并将其转换为百分比形式来改变进度条的宽度。

同时，通过监听 resize 事件，当窗口大小发生变化时，重新计算页面可以滚动的最大高度，并更新进度条的宽度。

最后，进度条容器在页面加载完成后以淡出的方式消失。

四、使用方法

将上述代码添加到对应的位置后，保存文件为 .htmlrrreee

où, progress-bar-container est le nom de classe du conteneur, utilisé pour définir la barre de progression La position et le style ; progress-bar est le nom de classe de la barre de progression, utilisé pour définir l'effet d'animation de la barre de progression.

2. Style CSS

Ensuite, nous devons utiliser CSS pour embellir la barre de progression. Dans la balise <style></style>, ajoutez le code suivant :

rrreee

Ici, nous définissons la largeur du conteneur de la barre de progression à 100 %, la hauteur à 5 px et la couleur d'arrière-plan ; de la barre de progression est à 100 %, la couleur d'arrière-plan est verte et la largeur est définie sur 0. Grâce aux effets de transition CSS, il existe une animation de transition fluide lorsque la largeur change. 🎜🎜3. Code jQuery🎜🎜Enfin, nous utilisons jQuery pour obtenir l'effet dynamique de la barre de progression. Dans la balise <script></script>, ajoutez le code suivant : 🎜rrreee🎜Le code ci-dessus obtient d'abord l'objet jQuery de la barre de progression et du conteneur de la barre de progression, puis calcule la hauteur maximale de défilement de la page. , et initialise la progression. La valeur de la barre est 0. 🎜🎜Ensuite, en écoutant l'événement scroll, obtenez la position actuelle du défilement en temps réel et convertissez-la en pourcentage pour modifier la largeur de la barre de progression. 🎜🎜 Parallèlement, en écoutant l'événement resize, lorsque la taille de la fenêtre change, la hauteur maximale que la page peut défiler est recalculée et la largeur de la barre de progression est mise à jour. 🎜🎜Enfin, le conteneur de la barre de progression disparaît en s'estompant après le chargement de la page. 🎜🎜4. Comment utiliser 🎜🎜Après avoir ajouté le code ci-dessus à l'emplacement correspondant, enregistrez le fichier au format .html, puis ouvrez le fichier via le navigateur pour voir l'effet dynamique de la page. chargement de la barre de progression. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser HTML, CSS et jQuery pour créer une barre de progression de chargement de page dynamique. En ajoutant une structure HTML, en définissant des styles CSS et en combinant l'écoute d'événements et les effets de transition CSS de jQuery, nous pouvons afficher le processus de chargement des pages en temps réel et améliorer l'expérience utilisateur. 🎜🎜J'espère que cet article vous sera utile ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!