Home > Developer > JavaScript
Summary of the loading progress plug-ins pace. js and NProgress. js,
These two plug-ins are about loading progress animations. They have their own characteristics. At least they have their own advantages for me. Today, I have played a great role in loading progress animation, and I have also studied a large number of (these two) Loading progress animations. I have a preliminary understanding of loading progress animation.
NProgress. js
NProgress is based on jquery and must be later than 1.8
API:
NProgress. start ()-progress bar
NProgress. set (0.4)-set the progress to a specific percentage position
NProgress. inc ()-a small increase in progress
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 is introduced.
Usage:
<script>$(function() { NProgress.start(); $(window).load(function() { NProgress.done(); });</script>
Custom Animation style:
Writing the style we defined into a script tag is a little trick.
<Script type = "text" id = "myId"> <br> <div class = "splash card"> <br> <p class = "lead" style = "text- align: center "> don't come back. Go away now... </p> <div class = "progress"> <div class = "mybar" role = "bar"> </div> <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: Setting ('{myid'}.html () // template is used to set the attributes of the animation style}); NProgress. start () ;}); $ (window ). load (function () {NProgress. done () ;}) </script>
Summary: In js, you can control when an animation starts, when it ends, and when it is loaded.
In a custom style, the key two pointers are the role attribute:
Role = bar: horizontal loading
Role = tiny circle with a spin
Example 2: (css is omitted)
<script type="text" id="myId"> <em id="__mceDel"><em id="__mceDel"><div class="bar" role="bar" style="display=block"><br> <div class="peg"></div><br> </div><br> <div class="spinner" role="spinner"><br> <div class="spinner-icon"></div><br> </div></em></em></script>
Pace. js:
API:
Pace. start: start to display the progress bar. If you do not use AMD or Browserify to load modules, this will be executed by default.
Pace. restart: Reload and display the progress bar.
Pace. stop: Hide the progress bar and stop loading.
Pace. track: monitors one or more request tasks.
Pace. ignore: ignore one or more request tasks.
Usage:
<Head> <script src = "/pace. js "> </script> <link href ="/pace/themes/pace-theme-barber-shop.css "rel =" external nofollow "rel =" stylesheet "/> <br> <! -- The css style here determines the style of the loading progress animation -->Change the animation style:
Many 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 introduce a file. Without writing any code on your own, you can bring your own loading progress animation, but there is a disadvantage, the loading progress animations provided on the official website do not have a mask layer.
Of course, you can set it yourself (I won't );
The above is a small series of pace. js and NProgress. the loading progress plug-ins of js are summarized in a little bit. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
