Lineone - Skeleton Element

Basic Skeleton

Code

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. Check out code for detail of usage.

                
  <div class="flex flex-col border border-slate-150 dark:border-navy-500">
    <div class="flex space-x-5 px-5 py-4">
      <div
        class="skeleton animate-wave size-16 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div
          class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"
        ></div>
        <div
          class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"
        ></div>
      </div>
    </div>
    <div
      class="skeleton animate-wave h-48 w-full bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="w-full px-6 py-4">
      <div
        class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
  </div>

Post Skeleton

Code

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. Check out code for detail of usage.

                
  <div class="flex flex-col">
    <div
      class="skeleton animate-wave h-48 w-full rounded-lg bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="flex space-x-5 py-4">
      <div
        class="skeleton animate-wave size-16 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div
          class="skeleton animate-wave h-3 w-10/12 rounded bg-slate-150 dark:bg-navy-500"
        ></div>
        <div
          class="skeleton animate-wave h-6 w-full rounded bg-slate-150 dark:bg-navy-500"
        ></div>
      </div>
    </div>
  </div>

Post Skeleton

Code

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. Check out code for detail of usage.

                
  <div
    class="flex flex-col space-y-4 border border-slate-150 dark:border-navy-500"
  >
    <div class="px-4 pt-4">
      <div
        class="skeleton animate-wave h-8 w-10/12 rounded-full bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
    <div
      class="skeleton animate-wave h-48 w-full bg-slate-150 dark:bg-navy-500"
    ></div>
    <div class="flex flex-1 flex-col justify-between space-y-4 p-4">
      <div
        class="skeleton animate-wave h-4 w-9/12 rounded bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave h-4 w-6/12 rounded bg-slate-150 dark:bg-navy-500"
      ></div>
      <div
        class="skeleton animate-wave h-4 w-full rounded bg-slate-150 dark:bg-navy-500"
      ></div>
    </div>
  </div>

Pulse Skeleton

Code

You can also use the animate-pulse to fade in and out skeleton. Check out code for detail of usage.

                
  <div
    class="flex animate-pulse flex-col border border-slate-150 dark:border-navy-500"
  >
    <div class="flex space-x-5 px-5 py-4">
      <div class="size-16 rounded-full bg-slate-150 dark:bg-navy-500"></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div class="h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div>
        <div class="h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div>
      </div>
    </div>
    <div class="h-48 w-full bg-slate-150 dark:bg-navy-500"></div>
    <div class="w-full px-6 py-4">
      <div class="h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div>
      <div class="mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div>
    </div>
  </div>

Pulse Skeleton

Code

You can also use the animate-pulse to fade in and out skeleton. Check out code for detail of usage.

                
  <div class="flex animate-pulse flex-col">
    <div class="h-48 w-full rounded-lg bg-slate-150 dark:bg-navy-500"></div>
    <div class="flex space-x-5 py-4">
      <div class="size-16 rounded-full bg-slate-150 dark:bg-navy-500"></div>
      <div class="flex flex-1 flex-col justify-between py-2">
        <div class="h-3 w-10/12 rounded bg-slate-150 dark:bg-navy-500"></div>
        <div class="h-6 w-full rounded bg-slate-150 dark:bg-navy-500"></div>
      </div>
    </div>
  </div>

Pulse Skeleton

Code

You can also use the animate-pulse to fade in and out skeleton. Check out code for detail of usage.

                
  <div
    class="flex animate-pulse flex-col space-y-4 border border-slate-150 dark:border-navy-500"
  >
    <div class="px-4 pt-4">
      <div class="h-8 w-10/12 rounded-full bg-slate-150 dark:bg-navy-500"></div>
    </div>
    <div class="h-48 w-full bg-slate-150 dark:bg-navy-500"></div>
    <div class="flex flex-1 flex-col justify-between space-y-4 p-4">
      <div class="h-4 w-9/12 rounded bg-slate-150 dark:bg-navy-500"></div>
      <div class="h-4 w-6/12 rounded bg-slate-150 dark:bg-navy-500"></div>
      <div class="h-4 w-full rounded bg-slate-150 dark:bg-navy-500"></div>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Skeleton

Basic Skeleton

Post Skeleton

Post Skeleton

Pulse Skeleton

Pulse Skeleton

Pulse Skeleton