Crafting a Spinning Loader with Pure CSS

Imagine you’re on a website, eagerly waiting for content to load, but all you see is a blank screen. It’s frustrating, isn’t it? The spinning loader, or spinner, is a UI element designed to combat this exact problem. It informs users that the system hasn’t stalled — it’s just busy fetching data. Today, we’ll be crafting a loader with pure CSS that effectively communicates this busy state.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Crafting a Loader with Pure CSS

We’ll first structure our spinner using HTML, then we’ll style and animate it using CSS.

HTML Structure for the CSS Loader

<div class="spinner"></div>

Our structure is lightweight, comprising a single div element with a class of “spinner”. This div will serve as the container for our loader.

Now that we’ve set the HTML structure, let’s proceed to craft the spinner using pure CSS.

CSS Styling and Animation for the Loader

/* Defining the Spinner */
.spinner {
  border: 14px solid #e8e8e8; /* Light grey */
  border-top: 14px solid #f65b5f; /* Our color */
  border-radius: 50%; /* Circle */
  width: 80px; 
  height: 80px; 
  animation: spin 1s ease infinite; /* Animation */
}

/* Animation for Spinning Effect */
@keyframes spin {
    to {
        transform: rotate(1turn); /* Full rotation */
    }
}

In the CSS, we define the .spinner class where we design the visual aspects and motion of our loader:

• The border is set to be 14px wide with a light grey color (#e8e8e8). This creates a circle, which becomes our loader’s base.
• The border-top is given a solid, visually appealing color (#f65b5f) to make it stand out against the lighter circle.
• We then make the border circular by setting the border-radius property to 50%.
• The dimensions of the spinner are set with the width and height properties, each set to 80px, giving our spinner a balanced size.
• The animation property defines our animation:
  • The animation’s name is “spin”, which we have defined in the @keyframes rule.
  • The duration is set to 1s, striking a balance between a fast and slow spin.
  • The animation-timing-function is set to ease, giving the animation a more natural feel.
  • The animation-iteration-count is set to infinite, meaning the animation will run indefinitely — perfect for a loader.

Finally, the @keyframes rule spin defines what the animation does — it rotates the spinner one full turn (1turn).

The Result

See the Pen Spinner Loader with Pure CSS by 1stWebDesigner (@firstwebdesigner) on CodePen.

Wrapping Up

Crafting a neat loader isn’t just about aesthetics; it’s a crucial tool that communicates system activity to users. When paired with effective UX writing and controlled with JavaScript, loaders can do more than indicate data-fetching; they can convey various states of processes in complex applications. Accompanying messages can offer insights like the operation type or completion time estimate.

Consider an e-commerce site using a small spinner on a “Buy Now” button to show a transaction is underway, with a note saying “Processing your purchase…”. For tasks with longer wait times, like report generation, a fullscreen loader might be suitable, potentially with a progress bar or comforting message such as “Compiling your custom report…”.

But it’s vital that the loader and its messages fit your design language and meet user expectations. The goal is to reduce wait-time friction and create a smooth, intuitive user experience.