Spinner

Overview

Description

Spinners are an animated icon, typically a circle or other graphic, that appears to show a process is underway. Spinners are used when a website, app, or software needs time to load content, save data, authenticate, or perform any other background operation.

Uses

  • Provides visual feedback: it gives an immediate visual signal that the system is processing, rather than appearing frozen or unresponsive.
  • Manages expectations: by showing something is happening, it communicates that the system is working and that the user’s request has been received and is being addressed.
  • Reduces frustration: instead of silence and uncertainty, a spinner offers a sense of active progress, which is a more positive experience than a blank screen.
  • Gives a sense of control: users feel more in control knowing their action has triggered a response, even if they cannot speed up the process itself.

Value to User

  • Reduces uncertainty: spinners alleviates ambiguity by clearly indicating that a task is in progress.
  • Creates assurance: users feel reassured that their request is being fulfilled, leading to a better overall perception of the application’s performance.
  • Improves user experience: by making the waiting period feel more interactive and less like dead time, spinners contribute to a smoother and more pleasant user journey.
  • Prevents abandonment: spinners helps keep users engaged by providing a visual cue that the system hasn’t crashed, encouraging them to wait for the task to complete.

Best Practices

  • Use spinners when the user advances to a new page or performs an action and the system is processing data or fetching information.
  • Spinners are best suited for loading a single module, such as a card or video within a larger page or dashboard.
  • For longer delays, use a determinate progress indicator (a progress bar) that shows a specific percentage of completion.
  • For full-page loads use e a skeleton screen when an entire page or a large section is loading.
  • For very short page or element loads (under 1 second) no loading indicator is needed, as it offers no real benefit.
  • Keep the animation speed moderate and smooth, with a full rotation typically taking 1-2 seconds.
  • Design the spinner to be on-brand; a creative or unique animation can make the wait more bearable and reinforce your brand personality.
  • Always include an optional text label or message above or with the spinner to explain the delay, e.g., “Loading data…”.
  • Choose a spinner size appropriate for the content being loaded: small for text labels or buttons, medium for icons, large for larger components like charts, and extra-large for large content areas

Accessibility Notes

  • Don’t rely on a visual spinner alone. Include a descriptive textual message (e.g., “Loading article…”) so screen reader users know what’s happening.
  • Use ARIA live regions to announce updates to screen readers when the spinner’s state changes.
  • Ensure the spinner doesn’t receive focus and is not included in the keyboard’s tab order (using tabindex=”-1″).
Can’t find what you’re looking for? Get in touch