How to initialize loading Animation in vue

This article focuses on "how to initialize loading animation in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to initialize and load animation in vue.

1. Add loading animation to the entry file index.html:

# Loading {top:50%; left:50%; position: absolute;-webkit-transform: translateY (- 50%) translateX (- 50%); transform: translateY (- 50%) translateX (- 50%); Zmuri index100;} @-webkit-keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale (0.75); transform: scale (0.75) } 100% {opacity: 1;-webkit-transform: scale (1); transform: scale (1);}} @ keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale (0.75); transform: scale (0.75);} 100% {opacity: 1;-webkit-transform: scale (1); transform: scale (1) }. Ball-beat > div {background-color: # 279fcf; width: 15px; height: 15px; border-radius: 100%! important; margin: 2px;-webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block;-webkit-animation: ball-beat 0.7s 0s infinite linear; animation: ball-beat 0.7s 0s infinite linear }. Ball-beat > div:nth-child (2n-1) {- webkit-animation-delay: 0.35s! important; animation-delay: 0.35s! important;}

two。 In the created method of app.vue:

Created () {document.body.removeChild (document.getElementById ('Loading'))} so far, I believe you have a deeper understanding of "how to initialize and load animation in vue". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!