页面加载组件

1.yhLoading.vue

<template>
    <div
          :style="{zIndex:zindex,backgroundColor:bgkcolor,Width:wdPx,Height:htpx}"
          class="divloding"
          v-if="fullscreenLoading"
         >
      <div class="loadingsp">

        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" class="path">

          </circle></svg>
        <p class="pcls">{{text}}</p>
      </div>


    </div>
</template>

<script>
    export default {
      name: "loading",
      props:{
        /**
         * 提示内容
         */
        text:{
          type:String,
          default:'加载中...'
        },
        /**
         * 是否显示
         */
        fullscreenLoading:{
          type:Boolean,
          default:false
        },
        /**
         * z-index
         */
        zindex:{
          type:Number,
          default:9999
        },
        /**
         * 背景颜色
         */
        bgkcolor:{
          type:String,
          default:'rgba(0, 0, 0, 0.8)'
        },
        /**
         * 宽度
         */
        wdPx:{
          type:String,
          default:'100%'
        },
        /**
         * 高度
         */
        htpx:{
          type:String,
          default:'100%'
        },

      },
    }
</script>

<style scoped>
.divloding{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity .3s;
   transition: opacity .3s;
  z-index: 999999;
  color: #409EFF;
  font-size: 14px;
}
  .pcls{
   margin: 23% 0 auto 0;
  }
/*.el-icon-loading:before {
  content: "\E61E";
}*/
.loadingsp {
  top: 50%;
  margin-top: -21px;
  width: 100%;
  text-align: center;
  position: absolute;
}


 .loadingsp .circular {
  height: 50px;
  width: 50px;
}

.loadingsp .circular {
  /* height: 42px; */
  /* width: 42px; */
  /* -webkit-animation: loading-rotate 2s linear infinite; */
  /* animation: loading-rotate 2s linear infinite; */
}

user agent stylesheet
svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}
.loadingsp {
  top: 50%;
  margin-top: -21px;
  width: 100%;
  text-align: center;
  position: absolute;
}
.loadingsp .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
  /* animation: loading-dash 1.5s ease-in-out infinite; */
  /* stroke-dasharray: 90,150; */
  /* stroke-dashoffset: 0; */
  stroke-width: 2;
  stroke: #409EFF;
  /* stroke-linecap: round; */
}
.loadingsp .pcls {
  color: #409EFF;
  margin: 3px 0;
  font-size: 14px;
}

</style>

2.使用

<template>
    <loading :fullscreenLoading="loading" :text="''"></loading>
</template>
<script>
    import loading from '@/components/yhLoading'
	components:{componentsHeader,bondFooter,loading},
</script>