When to use

• Fetching data – When retrieving content from a server (e.g., loading search results).

• Submitting forms – When a process takes time to complete (e.g., payment processing).

• Lazy loading content – When loading additional elements as users scroll.

Best practices

• Use the right indicator – Spinners for short waits, skeleton screens for longer loads.

• Provide a sense of progress – Show percentage indicators or estimated wait times when possible.

• Avoid unnecessary loading states – Instant actions don’t need a spinner; only use indicators for noticeable delays.

<div class="loading-spinner"></div>
<p>Loading content, please wait...</p>

Loading indicators should be subtle but effective, keeping users informed without causing unnecessary distraction.