Skip to content
New issue

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

Vue项目访问白屏时加载动画 #30

Open
klren0312 opened this issue May 8, 2019 · 0 comments
Open

Vue项目访问白屏时加载动画 #30

klren0312 opened this issue May 8, 2019 · 0 comments
Labels
Vue vue相关问题

Comments

@klren0312
Copy link
Owner

1. 加载动画

https://epic-spinners.epicmax.co/#/

2. 在index.html中引入动画

<!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>

3. 页面加载完成, 在App.vue中将加载动画删除

... ...
 created () {
    try {
      document.body.removeChild(document.getElementById('loading-spinner'))
    } catch (e) {
    }
  },
... ...
@klren0312 klren0312 added the Vue vue相关问题 label May 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Vue vue相关问题
Projects
None yet
Development

No branches or pull requests

1 participant