# All files / components/helper SkeletonContent.vue

100% Statements 20/20
100% Branches 0/0
100% Functions 3/3
100% Lines 19/19

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
    45
    46
    47
    48
    49
    50
    51

    2x

    2x
    2x

    6x
    18x
    6x

    6x

    6x

    2x

    2x
    2x
    2x

    2x
    2x

    2x
    2x

    2x

    6x

     <template>
      <div>
        <p class="mb-0">
          <strong>Name:</strong>
          <span
            class="loading-animation"
            :style="{ width: generateRandomWidth() }"
          />
        </p>
        <p class="mb-0">
          <strong>Course Count:</strong>
          <span
            class="loading-animation"
            :style="{ width: generateRandomWidth() }"
          />
        </p>
        <p class="mb-0">
          <strong>Path:</strong>
          <span
            class="loading-animation"
            :style="{ width: generateRandomWidth() }"
          />
        </p>
      </div>
    </template>

    <script setup>
    const generateRandomWidth = () => `${Math.floor(Math.random() * 13) + 8}rem`
    </script>

    <style scoped>
    .loading-animation {
      display: inline-block;
      height: 1.25rem; /* Adjust height as per your design */
      background-color: #252222; /* Placeholder color */
      border-radius: 0.5rem;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(143, 139, 139, 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>