# All files / components/helper SkeletonTab.vue

100% Statements 9/9
100% Branches 0/0
100% Functions 1/1
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    2x

    2x

    2x
     <template>
      <div
        class="skeleton-tab"
        :style="{ width: randomWidth }"
      >
        <div
          class="nav-link loading-animation"
        />
      </div>
    </template>

    <script setup>
    import { ref } from 'vue'

    const randomWidth = ref(`${Math.floor(Math.random() * 6) + 4}rem`) // Adjust range and units as needed
    </script>

    <style scoped>
    .skeleton-tab {
      height: 2rem; /* Adjust height as per your design */
      background-color: #ccc; /* Placeholder color */
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }

    .loading-animation {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite linear;
    }

    @keyframes loading {
      0% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0 50%;
      }
    }
    </style>