Vue handwriting loading animation project
|
When the page is not responding, displaying the loading animation is a user-friendly performance, so as not to cause a white screen. The animation will be removed when the response content is rendered to the page. First put the loading effect picture
Principle: pseudo-class + animation. Below is a step-by-step diagram, which is posted to help you understand. The essence of loading animation is to set a square with fixed width and height, border-radius: 50%; to make it circular, then give the div a 3px border and set it transparent, and then set the upper border to white separately, use the ::before and ::after pseudo-class absolute to position and make the same settings. The difference is to increase the gap left in turn, and the animation execution time becomes longer and the delay is set, so that the circle can rotate at different speeds.
Full code: loading.vue in the components folder
<template>
<div id="loader_wrapper">
<div id="loader"></div>
<div class="load_title">Loading, please wait......</div>
</div>
</template>
<script>
export default{
name:"loading",
}
</script>
<style scoped>
#loader_wrapper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0,.8);
background-size: 100% 100%;
}
#loader{
display: block;
position: relative;
left: 50%;
top: 50%;
width: 300px;
height: 300px;
/* background: red; */
margin: -150px 0 0 -150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 5s linear infinite;
-ms-animation: spin 5s linear infinite;
-moz-animation: spin 5s linear infinite;
-o-animation : spin 5s linear infinite;
animation:spin 5s linear infinite;
z-index: 1001;
}
#loader:before{
content:"";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
/* background: green; */
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 8s linear infinite;
-ms-animation: spin 8s linear infinite;
-moz-animation: spin 8s linear infinite;
-o-animation : spin 8s linear infinite;
animation:spin 8s linear infinite;
}
#loader:after{
content:"";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
/* background: yellow; */
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 8s linear 1s infinite;
-ms-animation: spin 8s linear 1s infinite;
-moz-animation: spin 8s linear 1s infinite;
-o-animation : spin 8s linear 1s infinite;
animation:spin 8s linear 1s infinite;
}
@-webkit-keyframes spin {
0%{
-webkit-transform: rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
-ms-transform:rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin{
0%{
-webkit-transform: rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
-ms-transform:rotate(360deg);
transform: rotate(360deg);
}
}
#loader_wrapper .load_title{
font-family: "Open Sans";
color:#fff;
font-size: .3rem;
width: 100%;
text-align: center;
z-index: 9999;
position: absolute;
top: 70%;
opacity: 1;
line-height: .3rem;
}
</style>Introduce and register loading in the cs.vue page cs.vue
<template>
<div class="main">
<loading v-if="!initFlag"></loading>
111
</div>
</template>
<script>
import loading from "../components/loading"
export default {
name:"tranin",
data () {
return {
initFlag:false, // Request to initialize global data false means the request failed}
},
components:{
loading,
}
}
</script>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: HTML form tag tutorial (2):
>>: How to install Jenkins using Docker
Recommend
How to check if the firewall is turned off in Linux
1. Service method Check the firewall status: [roo...
Summary of clipboard.js usage
Table of contents (1) Introduction: (2) The ways ...
Summary of shell's method for determining whether a variable is empty
How to determine whether a variable is empty in s...
Detailed explanation of the underlying encapsulation of Java connection to MySQL
This article shares the Java connection MySQL und...
How to make a website front end elegant and attractive to users
The temperament of a web front-end website is a fe...
Table related arrangement and Javascript operation table, tr, td
Table property settings that work well: Copy code ...
Vue makes a simple random roll call
Table of contents Layout part: <div id="a...
Configure VIM as a C++ development editor in Ubuntu
1. Copy the configuration file to the user enviro...
Docker container from entry to obsession (recommended)
1. What is Docker? Everyone knows about virtual m...
Analysis of the locking mechanism of MySQL database
In the case of concurrent access, non-repeatable ...
Nginx reverse proxy configuration to remove prefix case tutorial
When using nginx as a reverse proxy, you can simp...
Detailed explanation of compiling and installing MySQL 5.6 on CentOS and installing multiple MySQL instances
--1. Create a new group and user for mysql # user...
Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis
This article uses examples to describe advanced u...
CSS to achieve the image hovering mouse folding effect
CSS to achieve the image hovering mouse folding e...
About VUE's compilation scope and slot scope slot issues
What are slots? The slot directive is v-slot, whi...