These two plug-ins are about loading progress animations. They should be said to have their own characteristics, at least for me, they have their own advantages. I have worked on the loading progress animation one day today and have also studied a large number of (those two) loading progress animations, which can be considered as having a preliminary understanding of the loading progress animation.
NProgress is based on jquery, and the version must be >1.8
API:
() — Start progress bar
(0.4) — Set the progress to a specific percentage position
() — Increase progress in small amounts
() — Mark the progress bar as completed
Introduced:
<link rel="stylesheet" type="text/css" href="css/" rel="external nofollow" > <script src="js/" type="text/javascript"></script><br>//besidesjqueryTo introduce
use:
<script>
$(function() {
();
$(window).load(function() {
();
});
</script>
Custom animation styles:
Writing the style we defined into a script tag is a trick.
<script type="text" ><br><div class="splash card"><br> <p class="lead" style="text-align:center">Don't come back，Go away immediately...</p> <div class="progress"> <div class="mybar" role="bar"> </div> </div> </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(){
({
template: $('#myId').html() // template is the attribute used to set animation styles });
();
});
$(window).load(function(){
();
})
</script>
Summary: Controls when the animation starts, ends, and the animation styles that have been loaded in js.
The two key pointers in a custom style are the role attribute:
role=bar: horizontal loading bar
role=spinner small rotation circle
Example 2: (CSS is omitted)
<script type="text" > <em ><em ><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>
：
API：
: Start displaying the progress bar. If you do not use AMD or Browserify to load the module, this will be executed by default.
: Progress bar reloads and displays.
: Hide the progress bar and stop loading.
: Monitor one or more request tasks.
: Ignore one or more request tasks.
usage:
<head> <script src="/pace/"></script> <link href="/pace/themes/" rel="external nofollow" rel="stylesheet" /> <br><!-- HerecssThe style determines the style of the loading progress animation --> </head>
Change the animation style:
Many loading progress animations have been designed in the pace, just change the css file.
Summarize:
The advantage of pace is to directly introduce files. You don’t need to write any code yourself, but you have a load progress animation. It’s just that there is a disadvantage. The load progress animation provided by the official website does not have a mask layer.
Of course, you can set it yourself (I don't know);
The above is a brief summary of the two loading progress plug-ins introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!