Maison > Article > interface Web > HTML, CSS et jQuery : créez une barre de progression de chargement animée

HTML, CSS et jQuery : créez une barre de progression de chargement animée

王林original: 2023-10-27 10:00:521517parcourir

HTML, CSS et jQuery : créez une barre de progression de chargement avec des effets animés

La barre de progression de chargement est un effet de chargement de page Web courant, qui permet aux utilisateurs de voir clairement la progression du chargement de la page en cours, améliorant ainsi l'expérience utilisateur. Dans cet article, nous utiliserons HTML, CSS et jQuery pour créer une barre de progression de chargement avec des effets d'animation et fournirons des exemples de code spécifiques.

Structure HTML

Tout d’abord, créons la structure de base du HTML. Nous avons besoin d'un élément conteneur qui contient la barre de progression et ajoutons un élément à l'intérieur qui affiche la progression.

<!DOCTYPE html>
<html>
<head>
  <title>加载进度条</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Style CSS

Ensuite, nous devons créer une feuille de style CSS pour embellir la barre de progression. Nous utiliserons des pseudo-éléments pour créer un effet d'animation sur la barre de progression.

body {
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  background-color: #ddd;
}

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  animation: progress-animation 2s linear;
}

/* 创建进度条动画 */
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 100%; }
}

code jQuery

Enfin, nous devons utiliser jQuery pour contrôler l'effet de chargement de la barre de progression. Nous utiliserons la méthode animate() pour modifier la largeur de la barre de progression dans un délai spécifié. animate()方法来在规定的时间内改变进度条的宽度。

$(document).ready(function(){
  // 定义进度条的目标宽度（根据需要自行修改）
  var targetWidth = 80;

  // 获取进度条元素
  var progressBar = $(".progress-bar");

  // 使用animate()方法来改变进度条的宽度
  progressBar.animate({
    width: targetWidth + "%"
  }, 2000);
});

在上面的代码中，我们在页面加载完成后，使用animate()方法来将进度条的宽度从0%逐渐增长到指定的目标宽度（此处为80%），过程持续2秒。

将上述代码保存为script.js文件，并将CSS样式保存为style.cssrrreee

Dans le code ci-dessus, nous utilisons la méthode animate() pour augmenter progressivement la largeur de la barre de progression de 0% à la largeur cible spécifiée (ici 80%) après le chargement de la page . ), le processus dure 2 secondes.

Enregistrez le code ci-dessus en tant que fichier script.js et enregistrez le style CSS en tant que fichier style.css dans le même répertoire que le fichier HTML.

Maintenant, lorsque vous ouvrez un fichier HTML et prévisualisez la page dans votre navigateur, vous verrez une barre de progression de chargement avec une animation. 🎜🎜En résumé, nous avons créé avec succès une barre de progression de chargement avec des effets animés en utilisant HTML, CSS et jQuery. En maîtrisant ces connaissances de base, nous pouvons obtenir des effets interactifs plus riches dans les pages Web et améliorer l'expérience utilisateur. J'espère que cet article vous aidera ! 🎜

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!

jquery css html JS 样式表伪元素

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Layui pour développer un éditeur de texte prenant en charge le glisser-déposerArticle suivant：Comment utiliser Layui pour développer un éditeur de texte prenant en charge le glisser-déposer

Articles Liés

Voir plus