<template>
  <div>
    <div class="loading">
      <div class="mk"></div>
      <div class="loading-content">
        <Icon type="ios-loading" size=18 class="spin-icon-load"></Icon>
        <div> {{ text }}</div>
      </div>
    </div>
  </div>
</template>


<script>
    export default {
        name: "ui-loading",
        computed: {},
        props: {
            text: {
                type: String,
                default: '加载中..'
            },
        },
        data() {
            return {}
        },

        created() {

        },
        methods: {}
    }
</script>
<style scoped>

  .loading{position:fixed;top:0;left:0;z-index:99;width:100%;height:100%}
  .loading .mk{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.3;filter:alpha(opacity=30)}
  .loading .loading-content{z-index: 2;position:absolute;top:40%;left:50%;padding:30px;padding-right:50px;padding-left:50px;border-radius:10px;background:#fff;text-align:center}
  .loading .loading-content div.loading-c{margin-top:8px}


  .spin-icon-load{
    animation: ani-spin 1s linear infinite;
  }


  @keyframes ani-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
</style>
