Menu
Menu
UI Element: Loader
10 of 14
Button Divider Flag Header Icon Image Input Label List Loader Rail Reveal Segment Step

Loader

A loader alerts a user to wait for an activity to complete

Definition Type
Design
Code
Summary
3 Themes
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Loader
Download ZIP View GitHub

Package Managers

Types

Loader

A loader

Loaders are hidden unless active or inside an active dimmer.

Text Loader

A loader can contain text

Loading
Loading

States

Indeterminate

A loader can show it's unsure of how long a task will take

Preparing Files

Active

A loader can be active or visible

An active dimmer may not be clearly visible without using a ui dimmer

Disabled

A loader can be disabled or hidden

Variations

Inline

Loaders can appear inline with content

Size

Loaders can have different sizes

Loading
Loading
Loading
Loading

Inverted

Loaders can have their colors inverted.

Loaders will automatically be inverted inside dimmers to maintain consistency
Loading
Loading
Loading
Loading

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header