css实现：页面加载中的loading蒙层 loading垂直水平居中且转圈

实现：页面没加载完出现的loading蒙层

fixed实现效果如上图

如果用absoulte出现滚动条时 不会完全覆盖住

附上代码

<template>

  <div id="loading">

    <div class="loading_box" v-if="showLoading">

      <img src="../../../static/images/loading.png"/>

    </div>

  </div>

</template>

<script type="text/ecmascript-6">

  export default {

    name: 'loading',

    props: {

      showLoading: {

        type: Boolean,

        default: false

      }

    }

  }

</script>

<style>

  #loading {

    width: 100%;

  }

  #loading .loading_box {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(0, 0, 0, 0.4);

    z-index: 100000;

  }

  #loading .loading_box img {

    display: block;

    width:50px;

    height: 50px;

    animation: rotating 1s linear infinite;

  }

  @keyframes rotating {

    from { transform: rotate(0deg) } to { transform: rotate(360deg) }

  }

</style>