Back To Tutorials

Animated Loading Spinner

Beginnerchallenge

Create an animated loading spinner using only HTML and CSS.

Objective

Design and implement an animated loading spinner without using any images or JavaScript.

Requirements

  1. Create a loading spinner using only HTML and CSS.
  2. The spinner should have a continuous animation.
  3. Use CSS animations to create the spinning effect.
  4. Make the spinner customizable (size, color) using CSS variables.

Steps

  1. Create the HTML structure for the spinner.
  2. Use CSS to style the basic shape of the spinner.
  3. Implement a CSS animation for the spinning effect.
  4. Use CSS variables to make the spinner customizable.
  5. Add a pulsing or fading effect to enhance the animation.

Bonus

  • Create multiple spinner designs that can be easily switched.
  • Add an option to change the spinning direction.

Resources

Solution

Here's a step-by-step solution to create an animated loading spinner using only HTML and CSS:

  1. HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Loading Spinner</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="spinner"></div>
</body>
</html>
  1. CSS Styling (styles.css):
:root {
    --spinner-size: 50px;
    --spinner-color: #3498db;
    --spinner-border-width: 4px;
    --spinner-speed: 1s;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.spinner {
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: var(--spinner-border-width) solid #f3f3f3;
    border-top: var(--spinner-border-width) solid var(--spinner-color);
    border-radius: 50%;
    animation: spin var(--spinner-speed) linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulsing effect */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.spinner {
    animation: spin var(--spinner-speed) linear infinite,
               pulse 2s ease-in-out infinite;
}

This solution creates an animated loading spinner using only HTML and CSS. The spinner is customizable through CSS variables, allowing easy changes to its size, color, border width, and animation speed.

To add the bonus features:

  1. For multiple spinner designs, you could create additional CSS classes with different styles. For example:
.spinner-dots {
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    animation: spinnerDots var(--spinner-speed) linear infinite;
}

.spinner-dots::before,
.spinner-dots::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background-color: var(--spinner-color);
}

.spinner-dots::before {
    left: 0;
}

.spinner-dots::after {
    right: 0;
}

@keyframes spinnerDots {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
  1. To change the spinning direction, you could add a CSS variable for direction:
:root {
    /* ... other variables ... */
    --spinner-direction: normal;
}

.spinner {
    /* ... other properties ... */
    animation: spin var(--spinner-speed) linear infinite var(--spinner-direction);
}

/* To reverse direction, set --spinner-direction to 'reverse' */

These additions allow for easy customization and extension of the loading spinner.