Skeleton

A loading placeholder component for Laravel applications. Shows animated skeleton screens while content loads. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/skeleton

Livewire Usage

Basic Text Skeleton

<livewire:sb-skeleton />

Different Variants

<livewire:sb-skeleton variant="text" />
<livewire:sb-skeleton variant="title" />
<livewire:sb-skeleton variant="avatar" />
<livewire:sb-skeleton variant="thumbnail" />
<livewire:sb-skeleton variant="card" />
<livewire:sb-skeleton variant="button" />

Multiple Lines

<livewire:sb-skeleton :count="3" />

Custom Dimensions

<livewire:sb-skeleton width="200px" height="40px" />

Without Animation

<livewire:sb-skeleton :animate="false" />

Livewire Props

Vue 3 Usage

Setup

import { SbSkeleton } from './vendor/sb-skeleton';
app.component('SbSkeleton', SbSkeleton);

Basic Usage

<template>
  <SbSkeleton />
</template>

Variants

<template>
  <!-- Single line text -->
  <SbSkeleton variant="text" />

  <!-- Larger title line -->
  <SbSkeleton variant="title" />

  <!-- Circular avatar -->
  <SbSkeleton variant="avatar" />

  <!-- Square thumbnail -->
  <SbSkeleton variant="thumbnail" />

  <!-- Large card shape -->
  <SbSkeleton variant="card" />

  <!-- Button shape -->
  <SbSkeleton variant="button" />
</template>

Multiple Lines

<template>
  <!-- 3 text lines -->
  <SbSkeleton variant="text" :count="3" />
</template>

Custom Dimensions

<template>
  <SbSkeleton width="100%" height="200px" />
</template>

Card Loading State

<template>
  <div class="border rounded-lg p-4">
    <template v-if="loading">
      <SbSkeleton variant="thumbnail" class="w-full h-48 mb-4" />
      <SbSkeleton variant="title" class="mb-2" />
      <SbSkeleton variant="text" :count="2" />
    </template>

    <template v-else>
      <img :src="https://raw.githubusercontent.com/mrshanebarron/skeleton/HEAD/card.image" class="w-full h-48 object-cover rounded mb-4" />
      <h3 class="font-bold">{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </template>
  </div>
</template>

User List Skeleton

<template>
  <div v-if="loading" class="space-y-4">
    <div v-for="i in 5" :key="i" class="flex items-center gap-4">
      <SbSkeleton variant="avatar" />
      <div class="flex-1">
        <SbSkeleton variant="title" class="w-1/4 mb-2" />
        <SbSkeleton variant="text" class="w-1/2" />
      </div>
    </div>
  </div>

  <div v-else>
    <!-- Actual user list -->
  </div>
</template>

Article Skeleton

<template>
  <div v-if="loading">
    <SbSkeleton variant="title" class="w-3/4 mb-4" />
    <div class="flex gap-2 mb-4">
      <SbSkeleton variant="avatar" class="w-6 h-6" />
      <SbSkeleton variant="text" class="w-24" />
      <SbSkeleton variant="text" class="w-20" />
    </div>
    <SbSkeleton variant="card" class="h-64 mb-4" />
    <SbSkeleton variant="text" :count="6" />
  </div>
</template>

Vue Props

Variant Reference

Features

• Preset Variants: Common shapes built-in
• Custom Sizing: Override with width/height
• Animation: Pulse effect for loading indication
• Multiple Items: Render several at once

Styling

Uses Tailwind CSS:

• Gray background (gray-200)
• Pulse animation
• Rounded corners per variant

Use Cases

• Page loading states
• Data fetching placeholders
• Image loading
• Form skeleton
• List loading states

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License