<template>
  <div
    class="custom-loading-box"
    :style="{
      width: width,
      height: height,
      background: background,
      position: position,
    }"
    :class="{ 'custom-is-table-box': !isTable }"
  >
    <div
      class="ball-beat"
      :style="{ top: top, left: left }"
      :class="{ 'custom-is-table-child': !isTable }"
    >
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  background: {
    type: String,
    default: 'var(--theme-color17)',
  },
  position: {
    type: String,
    default: 'absolute',
  },
  width: {
    type: String,
    default: '100%',
  },
  left: {
    type: String,
    default: '0px',
  },
  height: {
    type: String,
    default: '100%',
  },
  top: {
    type: String,
    default: '0px',
  },
  isTable: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
.custom-loading-box {
  top: 0;
  //   -webkit-transform: translateY(-50%) translateX(-50%);
  //   transform: translateY(-50%) translateX(-50%);
  z-index: 100;
  box-sizing: border-box;
  .ball-beat {
    position: sticky;
    .dja();
  }
  .ball-beat > div {
    background-color: #4999ff;
    width: 14px;
    height: 14px;
    border-radius: 100% !important;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear;
    z-index: 300;
  }

  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
    animation-delay: 0.35s !important;
  }
}
.custom-is-table-box {
  .dja();
  .custom-is-table-child {
    .dj();
    position: relative;
  }
}

@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
