Skeleton component

import { DAYSkeletonLoaderComponent } or { DAYSkeletonLoaderDirective } from '/skeleton-loader';

Selectors

Skeleton Loader: day-skeleton-loader

Skeleton Loader Directive: daySkeletonLoader

Installation and Usage

npm install @dayerlin-bustamante/skeleton

import { DAYSkeletonLoaderComponent } from '@dayerlin-bustamante/skeleton';

<day-skeleton-loader [width]="'100%'" [height]="'20px'"/>

Inputs

Name	Description	Default
type: DAYSkeletonLoaderTypes 'block' \| 'table' \| 'input' \| 'checkbox' \| 'radio' \| 'cell';	Defines the type of skeleton loader.	block
label: boolean	If true, displays a label for the skeleton loader only the input type.	'false'
row: number	Number of rows for the skeleton loader only the input table.	5
col: number	Number of columns for the skeleton loader only the input table.	3

Outputs

Not included

Directives

The daySkeletonLoader directive applies a lightweight shimmer-style loading effect to any DOM element using a ::after pseudo-element. Designed for simplicity and flexibility, it wraps content with a visual skeleton block while data is loading.

It automatically sets position: relative on the host element if its position is static, ensuring the ::after overlay is positioned correctly regardless of layout context.

Public methods

Not included

The day-skeleton-loader and its directive provide animated loaders while data is being fetched, dynamically adapting to the structure and type of content through configurable types.

Dependencies

This component does not have any dependencies.

Example

Html

Demo

Description

Multiple supported types: block, input, checkbox, radio, table.
Decoupled styling using CSS custom properties for sizes, colors, and spacing.
Shimmer animation to simulate loading.
Declarative usage or as a directive, adaptable to flexible layouts.
Compatible with design systems that rely on :host and external CSS variables.