Skeleton

Skeleton loaders should be used in favor of traditional loading indicators, because they provide a hint to the user on what to expect after the content is loaded.

<script lang="ts" setup>
import { NNSkeleton } from "@fronntui/vue";
</script>

<template>
  <div>
    <NNSkeleton />
  </div>

  <div class="skeleton-composition">
    <NNSkeleton style="height: 3rem; width: 3rem; border-radius: 100%" />
    <NNSkeleton style="height: 2rem" />
    <NNSkeleton style="height: 3rem; grid-column: span 2" />
    <NNSkeleton style="grid-column: span 2" />
    <NNSkeleton style="grid-column: span 2" />
  </div>
</template>

<style scoped>
.skeleton-composition {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
</style>

Select Slider