# vue初始化动画加载

**Repository Path**: gqni/loading

## Basic Information

- **Project Name**: vue初始化动画加载
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-09-21
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1.在入口文件index.html中加入如下代码： 

> //样式

```
<style type="text/css">
      #Loading {
        top:50%;
        left:50%;
        position: absolute;
        -webkit-transform: translateY(-50%)  translateX(-50%);
        transform: translateY(-50%)  translateX(-50%);
        z-index:100;
      }
      @-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; }
    </style> 
```

> //div

```
    <div id="Loading"> 
        <div class="loader-inner ball-beat"> <div></div> <div></div> <div></div> </div> 
    </div>


```

### 2.在app.vue的created方法中： 

```
created() { 
    document.body.removeChild(document.getElementById('Loading')) 
 }

```

### 效果图

![输入图片说明](https://images.gitee.com/uploads/images/2018/0921/163303_1c1111fa_2011549.png "屏幕截图.png")