Skeleton

The FktSkeleton component provides loading placeholders with multiple types, animations, and configurable appearance. Perfect for indicating content loading states with realistic previews.

Import

import {FktSkeletonComponent} from "frakton-ng/skeleton";

Basic

Basic skeleton component with configurable properties.

Basic example

Common skeleton usage patterns and layouts.

Common Skeleton Patterns

Typical layouts you'll use for loading states.

User Profile Card

Article Preview

Product Card

Data Table Row


	Common Skeleton Patterns
	Typical layouts you'll use for loading states.

	
		
			User Profile Card
			
				
				
					
					
					
				
			
		

		
			Article Preview
			
				
				
				
				
					
					
				
			
		



		
			Product Card
			
				
				
				
				
					
					
				
			
		

        
            Data Table Row

Types example

Different skeleton types: text, circle, rect, button, and image.

Skeleton Types

Different skeleton types for various content placeholders.

Text

Single and multi-line text placeholders

Circle

Perfect for avatars and profile images

Rectangle

General purpose rectangular placeholders

Button

Button-shaped placeholders

Image

Image placeholders with aspect ratios


	Skeleton Types
	Different skeleton types for various content placeholders.
	
	
		
			@if (showLabels()) {
				Text
				Single and multi-line text placeholders
			}
			
				
				
			
		

		
			@if (showLabels()) {
				Circle
				Perfect for avatars and profile images
			}
			
				
				
				
			
		

		
			@if (showLabels()) {
				Rectangle
				General purpose rectangular placeholders
			}
			
				
				
				
			
		

		
			@if (showLabels()) {
				Button
				Button-shaped placeholders
			}
			
				
				
				
			
		

		
			@if (showLabels()) {
				Image
				Image placeholders with aspect ratios
			}

Animations example

Various animation effects: shimmer, pulse, wave, and none.

Animation Effects

Different loading animations to match your design preferences.

Shimmer (Default)

Smooth gradient sweep effect

Pulse

Gentle opacity pulsing

Wave

Wave sweep across the element

None

Static placeholder without animation

Note: Use the controls to change the skeleton type and see how animations work with different shapes.


	Animation Effects
	Different loading animations to match your design preferences.
	
	
		
			Shimmer (Default)
			Smooth gradient sweep effect
			
		

		
			Pulse
			Gentle opacity pulsing
			
		

		
			Wave
			Wave sweep across the element
			
		

		
			None
			Static placeholder without animation
			
		
	

	
		Note: Use the controls to change the skeleton type and see how animations work with different shapes.