Maison > Article > interface Web > Comment utiliser le plug-in de progression du chargement avec pace.js et NProgress.js (tutoriel détaillé)

Comment utiliser le plug-in de progression du chargement avec pace.js et NProgress.js (tutoriel détaillé)

亚连original: 2018-06-08 17:24:051971parcourir

Ces deux plug-ins concernent le chargement des animations de progression. Aujourd'hui, je vais partager avec vous un bref résumé des deux plug-ins de progression de chargement, pace.js et NProgress.js. Les amis intéressés devraient y jeter un œil

Les deux plug-ins concernent le chargement d'animations de progression. Il faut dire que chacun a ses propres caractéristiques. Du moins pour moi, chacun a ses propres avantages. Aujourd'hui, j'ai bricolé l'animation de progression du chargement et étudié beaucoup (juste ces deux) animations de progression du chargement. Je pense avoir une compréhension préliminaire de l'animation de progression du chargement.

NProgress.js

NProgress est basé sur jquery, et la version doit être >1.8

API :

　　NProgress.start() — Démarrez le barre de progression

NProgress.set(0.4) — Définit la progression sur un pourcentage spécifique
NProgress.inc() — Augmente légèrement la progression
NProgress.done() — Marque la barre de progression comme terminée

Introduction :

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来

Utilisation :

<script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
 　　NProgress.done();
 });
</script>

Style d'animation personnalisé :

Écrivez le style que nous avons défini dans une balise de script, qui est considéré comme juste un petit truc.

<script type="text" id="myId"><br>　　<p class="splash card"><br> 　　<p class="lead" style="text-align:center">不要回来，马上走开...</p>
　　 <p class="progress">
 　　<p class="mybar" role="bar">
 　　</p>
 　　</p>
</p><br></script>

C'est du CSS

html,body,iframe{
 margin: 0;
 padding: 0;
}
#nprogress{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f7f7f7;
 z-index: 999;
}
.spinner-icon{
 display: none!important;
}
.splash {
 position:absolute;
 top:40%;
 left:0;
 right:0;
 margin: auto;
 }
 .splash img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 width: 100px;
 }
 .card {
 background-color: #f7f7f7;
 padding: 20px 25px 15px;
 margin: 0 auto 25px;
 width: 380px;
 }
 .mybar {
 background: #29d;
 height:10px;
 }
 .progress {
 height: 10px;
 overflow: hidden;
 }

Le code js devient comme ceci :

<script type="text/javascript">
 $(function(){
  NProgress.configure({
  template: $(&#39;#myId&#39;).html() // template是用来设置动画样式的属性
  });
  NProgress.start();
 });
 $(window).load(function(){
  NProgress.done();
 })
 </script>

Résumé : Contrôler quand l'animation démarre et quand dans js est terminé, l'animation le style a été chargé.

Les deux pointeurs clés du style personnalisé sont les attributs de rôle :

role=bar : barre de chargement horizontale

role=spinner tournant un petit cercle

Exemple 2 : (css omis)

<script type="text" id="myId">
　　<em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br>　　　　<p class="peg"></p><br>　　</p><br>　　<p class="spinner" role="spinner"><br>　　　　<p class="spinner-icon"></p><br>　　</p></em></em>
</script>

pace.js :

API : 　

Pace.start : Commencez à afficher la barre de progression, si vous ne l'êtes pas. Si vous utilisez AMD ou Browserify pour charger le module, celui-ci sera exécuté par défaut.

Pace.restart : La barre de progression est rechargée et affichée.
Pace.stop : masquez la barre de progression et arrêtez le chargement.
Pace.track : Surveillez une ou plusieurs tâches de requête.
Pace.ignore : Ignorer une ou plusieurs tâches de requête.

Utilisation :

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br>　　<!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>

Changer le style d'animation :

De nombreux types d'animations de progression du chargement ont été conçus au rythme, il vous suffit de modifier le fichier CSS

Résumé :

L'avantage de Pace est que vous pouvez importer directement le fichier. Vous n'avez pas besoin d'écrire de code vous-même, et cela vient. avec une animation de progression du chargement. Il n'y a qu'un seul inconvénient. L'animation de progression du chargement fournie par le site officiel n'a pas de calque de masque.

Bien sûr, vous pouvez le configurer vous-même (je ne sais pas comment)

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir ; .

Articles associés :

Comment utiliser ajax pour afficher une page dans vue.js

Demande ajax + rendu vue.js + chargement de la page

Comment résoudre le problème de clignotement de la page lorsque Vue.js affiche des données

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!

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：Le composant Vue crée un menu à sélection multiple infiniArticle suivant：Le composant Vue crée un menu à sélection multiple infini

Articles Liés

Voir plus