web/packages/components/Loading/index.vue

<template>
  <div class="loading-container" v-if="loading">
    <div class="content-shadow">
      <div id="svg-loading">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
          <text x="50" y="50" text-anchor="middle" dy="0.38em" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#2abed1" stroke-width="0.6000000000000001" font-size="22" font-family="arial">
            剑鱼标讯
            <animate attributeName="stroke-dasharray" repeatCount="indefinite" calcMode="spline" dur="3.0303030303030303s" values="0 100;100 100;0 100" keyTimes="0;0.5;1" keySplines="0.3 0 0.7 1;0.3 0 0.7 1"></animate>
            <animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="3.0303030303030303s" values="0;0;-100" keyTimes="0;0.5;1"></animate>
          </text>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LogoLoading',
  props: {
    loading: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.loading-container {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.content-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>