TopLeftLoading.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

const titleChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
  initDom();
});

function initDom() {
  var myChart = echarts.init(titleChartRef.value as HTMLElement);
  let option: EChartsOption = {
    graphic: {
      elements: [
        {
          type: 'group',
          left: 'center',
          top: 'center',
          children: new Array(10).fill(0).map((val, i) => ({
            type: 'rect',
            x: i * 14,
            shape: {
              x: 0,
              y: -20,
              width: 5,
              height: 30,
            },
            style: {
              fill: '#FED049',
            },
            keyframeAnimation: {
              duration: 1000,
              delay: i * 200,
              loop: true,
              keyframes: [
                {
                  percent: 0.5,
                  scaleY: 0.3,
                  easing: 'cubicIn',
                },
                {
                  percent: 1,
                  scaleY: 1,
                  easing: 'cubicOut',
                },
              ],
            },
          })),
        },
      ],
    },
  };
  myChart.setOption(option);
}
</script>
<template>
  <div class="top-left-box row items-center justify-center overflow-hidden">
    <div style="width: 100%; height: 100%" ref="titleChartRef"></div>
  </div>
</template>
<style lang="scss" scoped>
.top-left-box {
  height: 50px;
  padding: $padding-sm;
}
</style>