Home >Web Front-end >JS Tutorial >How to use the loading progress plug-in with pace.js and NProgress.js (detailed tutorial)

How to use the loading progress plug-in with pace.js and NProgress.js (detailed tutorial)

亚连Original: 2018-06-08 17:24:052038browse

These two plug-ins are about loading progress animation. Today, let’s learn about the two loading progress plug-ins of pace.js and NProgress.js. Friends who are interested can take a look.

These two plug-ins are about loading progress animation. It should be said that each has its own characteristics. At least for me, each has its own advantages. Today I tinkered with the loading progress animation and studied a lot of (just these two) loading progress animations. I think I have a preliminary understanding of the loading progress animation.

NProgress.js

NProgress is based on jquery, and the version must be >1.8

API:

　　NProgress.start() — Start the progress bar
NProgress.set(0.4) — Set the progress to a specific percentage position
NProgress.inc() — Increase the progress by a small amount
NProgress.done() — Mark the progress bar as completed

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要引入进来

Usage:

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

Custom animation style:

Write the style we defined into a script tag. This is a little trick.

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

This is 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;
 }

The js code becomes like this:

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

Summary: Control when the animation starts and ends in js, and it has been loaded. Animation style.

The two key pointers in the custom style are the role attributes:

role=bar: horizontal loading bar

role=spinner small rotating circle

Sample 2: (css omitted)

<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: Start displaying the progress bar, if you are not using AMD Or if Browserify is used to load the module, this will be executed by default.
Pace.restart: The progress bar is reloaded and displayed.
Pace.stop: Hide the progress bar and stop loading.
Pace.track: Monitor one or more request tasks.
Pace.ignore: Ignore one or more request tasks.

Usage: 　　

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

Change animation style:

Many kinds of loading progress animations have been designed in pace, you only need to change the css file

Summary:

The advantage of pace is that you can directly import the file. You don’t need to write any code yourself. It comes with a loading progress animation. It just has One drawback is that the loading progress animation provided by the official website does not have a mask layer.

Of course, you can set it up yourself (I don’t know how);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use ajax to render the page in vue.js

ajax request vue.js rendering page loading

How to solve the problem of page flashing when Vue.js displays data

The above is the detailed content of How to use the loading progress plug-in with pace.js and NProgress.js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Vue component makes infinite multi-select menuNext article：Vue component makes infinite multi-select menu

See more

How to use the loading progress plug-in with pace.js and NProgress.js (detailed tutorial)

Related articles