We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
https://epic-spinners.epicmax.co/#/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> .loading-spinner { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .orbit-spinner, .orbit-spinner * { box-sizing: border-box; } .orbit-spinner { height: 55px; width: 55px; border-radius: 50%; perspective: 800px; } .orbit-spinner .orbit { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .orbit-spinner .orbit:nth-child(1) { left: 0%; top: 0%; animation: orbit-spinner-orbit-one-animation 1200ms linear infinite; border-bottom: 3px solid #009688; } .orbit-spinner .orbit:nth-child(2) { right: 0%; top: 0%; animation: orbit-spinner-orbit-two-animation 1200ms linear infinite; border-right: 3px solid #009688; } .orbit-spinner .orbit:nth-child(3) { right: 0%; bottom: 0%; animation: orbit-spinner-orbit-three-animation 1200ms linear infinite; border-top: 3px solid #009688; } @keyframes orbit-spinner-orbit-one-animation { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-two-animation { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-three-animation { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } </style> </head> <body> <div class="loading-spinner"> <div class="orbit-spinner"> <div class="orbit"></div> <div class="orbit"></div> <div class="orbit"></div> </div> </div> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
App.vue
... ... created () { try { document.body.removeChild(document.getElementById('loading-spinner')) } catch (e) { } }, ... ...
The text was updated successfully, but these errors were encountered:
No branches or pull requests
1. 加载动画
https://epic-spinners.epicmax.co/#/
2. 在index.html中引入动画
3. 页面加载完成, 在
App.vue
中将加载动画删除The text was updated successfully, but these errors were encountered: