Vue3 SVG Loading Indicator コンポーネント

const SvgLoading = {
    template: `
      <div>
        <component is="style">
          .shade {
            position: fixed;
            display: flex;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #333;
            opacity: 0.7;
            justify-content: center;
            align-items: center;
            z-index: 9999;
          }
        </component>
        <div class="shade" v-if="loading">
          <div>
            <div style="display: block">
              <span style="font-size:1.8rem; color: white">{{ msg }}</span>
            </div>
            <img :src="uri" :width="width">
          </div>
        </div>
      </div>
    `,
    props: {
      loading: Boolean,
      uri: String,
      msg: String,
      width: Number
    }
};
export default SvgLoading;