Components

Loading

Implement Semji's loading animations with Tailwind CSS. Create sleek spinners and progress bars for better UX in web apps.

Variants

Loading spinner

The standard format for loading is component class `loading`, accompanied by modifier class `loading-spinner` to show the spinner animation. The size of the spinner can be adjusted using the responsive classes `loading-{size}` where `{size}` can be `xs`, `sm`, `md`, `lg` or `xl`.

Loading dots

Use the modifier class `loading-dots` for loading with dots animation.

Loading rings

Use the modifier class `loading-ring` for loading with growing rings animation.

Loading ball

Use the modifier class `loading-ball` for loading with jumping balls animation.

Loading bars

Use the modifier class `loading-bars` for loading with bars animation.

Loading infinity

Use the modifier class `loading-infinity` for loading with infinity animation.

Colors

Colored spinners

Utilize the text utility class `text-{semantic-color}` to create loading animations with different colors, each corresponding to specific modifiers.

Illustrations

Within buttons

Below are the examples illustrating the integration of loading animations within buttons.

Within alerts

Below are the examples illustrating the integration of loading animations within alerts.

Primary alert: Welcome to our platform! Explore our latest features and updates.

Success alert: Explore our recent achievements and upcoming events.

Within cards

Below is the example illustrating the integration of loading animations within cards.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`loading`	component	Base class for loading component.
`loading-spinner`	style	Shows the spinner animation.
`loading-dots`	style	Shows the dots animation.
`loading-ring`	style	Shows the ring animation.
`loading-ball`	style	Shows the ball animation.
`loading-bars`	style	Shows the bars animation.
`loading-infinity`	style	Shows the infinity animation.
`loading-xs`	size	Makes the loading component extra small.
`loading-sm`	size	Makes the loading component small.
`loading-md`	size	Makes the loading component medium(default).
`loading-lg`	size	Makes the loading component large.
`loading-xl`	size	Makes the loading component extra-large.