The Framework 7 provides a handy load indicator (preloader), a daisy-like circular progress bar that rotates continuously. It can be used when our page needs to load data, or to perform more time-consuming operations.
And this load indicator is drawn using SVG and is animated using CSS, so it's easy to change its size.
1, the use of load indicators
<span class= "Preloader" ></span>
2, modify the size and color of the load indicator
(1) The load indicator has 2 colors to choose from: One of the colors is in conjunction with a bright background (the default) and another color with a dark background.
(2) To change the size, as long as the direct set width, height style properties can be.
<body>
...
<div class= "Page-content" >
<div class= "Content-block row" >
<!--load indicator for the default style-->
<div class= "col-25" >
Default<br>
<span class= "Preloader" ></span>
</div>
<!--white load indicator (for dark backgrounds)-->
<div class= "col-25 Col-dark" >
White<br>
<span class= "Preloader preloader-white" ></span>
</div>
<!--Modify Load indicator dimensions (42px*42px)-->
<div class= "col-25" >
Big<br>
<span style= "WIDTH:42PX; height:42px "class=" Preloader "></span>
</div>
<!--modify size and color (for dark backgrounds)-->
<div class= "col-25 Col-dark" >
White<br>
<span style= "WIDTH:42PX; height:42px "class=" Preloader preloader-white "></span>
</div>
</div>
</div>
...
<style>
. col-25 {
padding:5px;
Text-align:center;
}
. col-dark {
Background: #222;
}
</style>
</body>
3, display the load indicator using modal mode
The example above is to place the load indicator directly on the page. We can also use JS to automatically display it through the mode of the page. (since it is modal, it means that we are not allowed to do anything when the load indicator is displayed.) ）
For example, we can display the data when it is loaded, telling the user that it is currently loading. Automatically closes the load when it is finished.
(1) Sample effect chart
After clicking the link, display the load indicator in the center of the page. After two seconds, the load indicator disappears automatically.
Original: FRAMEWORK7-load indicator (preloader) usage instructions
(2) HTML page code
<body>
...
<div class= "Page-content" >
<div class= "Content-block" >
<p><a href= "#" class= "Open-indicator" > Show indicator</a></p>
</div>
</div>
...
</body>
(3) JS code
$$ ('. Open-indicator '). On (' click ', function () {
Myapp.showindicator ();
settimeout (function () {
Myapp.hideindicator ();
}, 2000);
});
Automatically display load prompt when 4,ajax request
If there are many pages in the APP that have data requests, if each request is like the above, manually add code to display and hide the load prompt. would be slightly troublesome.
We can intercept and unify the Ajax requests when the FRAMEWORK7 is initialized. The load prompt is displayed when the request is initiated, and the load prompt is hidden when the request is completed.
//Init app
var myApp = new Framework7 ({
//Ajax request started
onajaxstart:function (xhr) {
Myapp.showindicator ();
},
//Ajax request completed
onajaxcomplete:function (XHR) {
myapp.hideindicator ();
}
});
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
