skeleton-ui-generator

Skeleton UI Generator

A lightweight, customizable library for generating skeleton loaders for tables, cards, lists, forms, galleries, and custom UI components. Perfect for creating smooth loading experiences in web applications.

Features

• 🎨 Fully Customizable - Colors, animations, sizes, and spacing
• 📱 Responsive - Works on all screen sizes
• 🎯 Multiple Types - Tables, cards, lists, forms, galleries, and custom skeletons
• 🚀 Lightweight - No dependencies, minimal bundle size
• 🔧 Framework Agnostic - Works with React, Vue, Angular, or vanilla JS
• 📦 TypeScript - Full TypeScript support with type definitions

Installation

npm install skeleton-ui-generator

Quick Start

import { createTableSkeleton, createCardSkeleton } from 'skeleton-ui-generator';

// Create a table skeleton
const tableSkeleton = createTableSkeleton({
  rows: 8,
  columns: 5,
  showHeader: true
});

// Append to DOM
document.getElementById('table-container').appendChild(tableSkeleton);

// Create a card skeleton
const cardSkeleton = createCardSkeleton({
  lines: 4,
  width: '300px'
});

document.getElementById('card-container').appendChild(cardSkeleton);

Usage Examples

Table Skeleton

import { createTableSkeleton } from 'skeleton-ui-generator';

const tableSkeleton = createTableSkeleton({
  rows: 10,
  columns: 6,
  showHeader: true,
  headerHeight: '60px',
  rowHeight: '45px',
  columnWidths: ['20%', '30%', '15%', '15%', '10%', '10%'],
  baseColor: '#f0f0f0',
  highlightColor: '#ffffff'
});

Card Skeleton

import { createCardSkeleton } from 'skeleton-ui-generator';

const cardSkeleton = createCardSkeleton({
  lines: 5,
  width: '400px',
  padding: '24px',
  baseColor: '#e3f2fd',
  highlightColor: '#ffffff',
  borderRadius: '12px'
});

List Skeleton

import { createListSkeleton } from 'skeleton-ui-generator';

const listSkeleton = createListSkeleton({
  items: 8,
  showAvatar: true,
  avatarSize: '60px'
});

Form Skeleton

import { createFormSkeleton } from 'skeleton-ui-generator';

const formSkeleton = createFormSkeleton({
  fields: 6
});

Gallery Skeleton

import { createGallerySkeleton } from 'skeleton-ui-generator';

const gallerySkeleton = createGallerySkeleton({
  items: 12,
  columns: 4
});

Custom Skeleton

import { createCustomSkeleton } from 'skeleton-ui-generator';

const customSkeleton = createCustomSkeleton({
  width: '200px',
  height: '100px',
  baseColor: '#fef3c7',
  highlightColor: '#ffffff'
});

React Integration

import React, { useEffect, useRef } from 'react';
import { createTableSkeleton } from 'skeleton-ui-generator';

function DataTable({ loading, data }) {
  const skeletonRef = useRef(null);

  useEffect(() => {
    if (loading && skeletonRef.current) {
      skeletonRef.current.innerHTML = '';
      const skeleton = createTableSkeleton({
        rows: 8,
        columns: 5,
        showHeader: true
      });
      skeletonRef.current.appendChild(skeleton);
    }
  }, [loading]);

  if (loading) {
    return <div ref={skeletonRef}></div>;
  }

  return (
    <table>
      {/* Your actual table content */}
    </table>
  );
}

Vue Integration

<template>
  <div>
    <div v-if="loading" ref="skeletonContainer"></div>
    <div v-else>
      <!-- Your actual content -->
    </div>
  </div>
</template>

<script>
import { createCardSkeleton } from 'skeleton-ui-generator';

export default {
  props: ['loading'],
  mounted() {
    this.updateSkeleton();
  },
  watch: {
    loading() {
      this.updateSkeleton();
    }
  },
  methods: {
    updateSkeleton() {
      if (this.loading && this.$refs.skeletonContainer) {
        this.$refs.skeletonContainer.innerHTML = '';
        const skeleton = createCardSkeleton({
          lines: 4,
          width: '100%'
        });
        this.$refs.skeletonContainer.appendChild(skeleton);
      }
    }
  }
}
</script>

Advanced Usage with Class Instance

import { SkeletonGenerator } from 'skeleton-ui-generator';

const generator = new SkeletonGenerator();

// Generate multiple skeletons with consistent styling
const config = {
  baseColor: '#e3f2fd',
  highlightColor: '#ffffff',
  animationDuration: '2s',
  borderRadius: '8px'
};

const tableSkeleton = generator.generateTableSkeleton({
  ...config,
  rows: 8,
  columns: 5
});

const cardSkeleton = generator.generateCardSkeleton({
  ...config,
  lines: 4
});

const listSkeleton = generator.generateListSkeleton({
  ...config,
  items: 6
});

API Reference

Configuration Options

Base Configuration (SkeletonConfig)

• baseColor?: string - Base color of the skeleton (default: '#e2e8f0')
• highlightColor?: string - Highlight color for animation (default: '#f1f5f9')
• animationDuration?: string - Animation duration (default: '1.5s')
• borderRadius?: string - Border radius (default: '4px')
• className?: string - CSS class name (default: 'skeleton')

Table Configuration (TableSkeletonConfig)

• rows?: number - Number of rows (default: 5)
• columns?: number - Number of columns (default: 4)
• showHeader?: boolean - Show header row (default: true)
• headerHeight?: string - Header row height (default: '48px')
• rowHeight?: string - Data row height (default: '40px')
• columnWidths?: string[] - Array of column widths (default: [])
• cellPadding?: string - Cell padding (default: '12px')

Card Configuration (CardSkeletonConfig)

• width?: string - Card width (default: '100%')
• height?: string - Card height (default: 'auto')
• lines?: number - Number of text lines (default: 3)
• lineHeight?: string - Height of each line (default: '20px')
• spacing?: string - Spacing between lines (default: '12px')
• padding?: string - Card padding (default: '20px')

List Configuration (ListSkeletonConfig)

• items?: number - Number of list items (default: 5)
• showAvatar?: boolean - Show avatar circles (default: true)
• avatarSize?: string - Size of avatar (default: '48px')
• spacing?: string - Spacing between items (default: '16px')

Custom Configuration (CustomSkeletonConfig)

• width?: string - Width of skeleton (default: '100%')
• height?: string - Height of skeleton (default: '20px')

Methods

SkeletonGenerator Class Methods

• generateTableSkeleton(config?: TableSkeletonConfig): HTMLElement
• generateCardSkeleton(config?: CardSkeletonConfig): HTMLElement
• generateListSkeleton(config?: ListSkeletonConfig): HTMLElement
• generateCustomSkeleton(config: CustomSkeletonConfig): HTMLElement
• generateFormSkeleton(config?: { fields?: number } & SkeletonConfig): HTMLElement
• generateGallerySkeleton(config?: { items?: number; columns?: number } & SkeletonConfig): HTMLElement

Convenience Functions

• createTableSkeleton(config?: TableSkeletonConfig): HTMLElement
• createCardSkeleton(config?: CardSkeletonConfig): HTMLElement
• createListSkeleton(config?: ListSkeletonConfig): HTMLElement
• createCustomSkeleton(config: CustomSkeletonConfig): HTMLElement
• createFormSkeleton(config?: { fields?: number } & SkeletonConfig): HTMLElement
• createGallerySkeleton(config?: { items?: number; columns?: number } & SkeletonConfig): HTMLElement

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE11+ (with polyfills)

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

MIT License - see the LICENSE file for details.

Changelog

1.0.0

• Initial release
• Table, card, list, form, gallery, and custom skeleton generators
• Full TypeScript support
• Comprehensive test suite
• Framework-agnostic implementation EOF

============================================

LICENSE

============================================

cat > LICENSE << 'EOF' MIT License

Copyright (c) 2025 Skeleton UI Generator

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. EOF