Why the Spinner Spins

During web page loading, app startup, file downloads - the spinning animation (loading spinner) displayed on screen is one of the most frequently seen icons in digital life.

That spinning animation isn't just saying "please wait." Behind it lies clever UX (User Experience) design wisdom that skillfully leverages human psychology.

The Psychology of Waiting - Uncertainty Creates Suffering

One of the major causes of stress during wait times is the uncertainty of "not knowing when it will end." Even when the wait lasts exactly as long, it feels very different depending on whether progress is visible. A wait with no end in sight drags on far longer than the clock says.

  • Nothing displayed: Maximum stress. "Did it freeze?" "Should I press the button again?" - anxiety builds
  • Spinner spinning: Knowing "it's processing" reduces anxiety. But "when it will finish" remains unknown
  • Progress bar advancing: Progress and estimated remaining time are visible, resulting in the lowest stress

A loading spinner is far better than displaying nothing, but provides less information than a progress bar - it's an intermediate solution.

The History of Spinners - From Hourglass to Spinning Circle

Hourglass Cursor (1980s-)

In early versions of Windows, the mouse cursor changed to an hourglass during processing. The hourglass was an excellent metaphor for intuitively conveying "time is passing," but since you couldn't see how much sand remained, it provided no progress information.

Rainbow Cursor (macOS)

The spinning rainbow circle on macOS (nicknamed the "rainbow cursor" or "beach ball") appears when an application becomes unresponsive. Users call it the "beach ball of death," making it one of the most hated icons.

CSS and SVG Spinners (2010s Onward)

The spinners used on the web and in apps are lightweight animations implemented with CSS animations or SVG. While design variations are abundant - spinning circles, dots that light up in sequence, undulating bars - they all share the common purpose of communicating "processing."

Even Spinner Speed Has Meaning

The rotation speed of a spinner affects user psychology.

  • Too fast: Creates feelings of urgency and anxiety. Gives the impression "something might be wrong"
  • Too slow: Reinforces the impression of slow processing. Makes users feel "this site is heavy"
  • Moderate speed (1-2 seconds per rotation): Gives a calm impression and conveys the message "processing smoothly"

In Google's Material Design implementation (Material Components), one expand-and-contract cycle of the spinner's arc is set to 1,333 milliseconds (about 1.3 seconds). No guideline dictates that this is the speed you must use, but because it is the default of such a widely used component, it has settled in as a de facto reference point.

Better Than Spinners - Skeleton Screens

Since the mid-2010s, more and more sites and apps have adopted "skeleton screens" instead of spinners. Skeleton screens display the layout's framework (gray placeholders) before the content loads.

Adopted by Facebook, YouTube, LinkedIn, and others, they offer these advantages:

  • Being able to predict "what will be displayed" makes the wait feel shorter
  • Since the page structure is visible first, users can start reading the moment content appears
  • The feeling of "being made to wait" is weaker compared to spinners

The "3-Second Rule" for Wait Times

The web industry widely quotes a rule of thumb: once loading passes three seconds, abandonment climbs sharply. The rate itself moves with the period measured, the industry, and the network conditions, so it cannot be reduced to a single figure, but the direction never changes - the longer the wait, the more visitors leave. This impatience is even more pronounced among younger users, making children's online experiences particularly sensitive to slow load times. CDN-based delivery acceleration, image optimization, and eliminating unnecessary JavaScript - reducing the wait time itself is the most effective UX improvement.

Spinners and skeleton screens are techniques to make wait times "feel comfortable," but they can't beat "eliminating" the wait time altogether. The reason IP Check-san loads quickly is because of the focus on server response speed and page optimization.

Summary

A loading spinner may look like a simple animation that just says "processing," but it's actually a product of UX design that considers human psychology. It reduces uncertainty, shortens perceived wait time, and prevents user abandonment. Next time you see a spinner spinning, imagine the processing happening behind it - DNS resolution, TCP connection, TLS handshake.

Related Terms in This Article

Latency The primary cause of spinner display. The time it takes to communicate with the server. DNS The first step in page loading. DNS resolution delays affect spinner display time. HTTPS TLS handshake time also contributes to spinner display. Accelerated by TLS 1.3. IP Address The connection to the DNS-resolved IP address happens behind the scenes while the spinner spins.

Frequently Asked Questions

Why are loading spinners displayed?

Loading spinners provide visual feedback that the system is working, reducing the uncertainty that causes user frustration. Without any indicator, users cannot tell whether the page is loading, frozen, or broken, leading them to repeatedly click or abandon the page.

What is a skeleton screen?

A skeleton screen is a placeholder UI that shows the layout structure of a page with gray shapes where content will appear. Unlike spinners, skeleton screens give users a preview of the page structure, creating the perception of faster loading by making the wait feel more purposeful.

How many seconds before users abandon a page?

The web industry widely quotes a rule of thumb that abandonment climbs sharply once loading passes three seconds. The actual rate varies a lot by industry and network conditions, so rather than chasing one number, cut the wait itself - that is the most effective UX improvement.