Article Categories

Selected Reading

How to Create the Animated Loader Ring using HTML and CSS?

HTML CSS Web Development Front End Technology

A loader ring is an animated component that provides visual feedback to users while content is loading. Using CSS animations, we can create an engaging spinning ring effect that enhances user experience during data loading processes.

Syntax

.loader {
    border: width solid color;
    border-radius: 50%;
    border-top: width solid accent-color;
    animation: spin duration timing-function iteration-count;
}

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

Key Properties

Property	Purpose
`border-radius: 50%`	Creates a perfect circle
`animation`	Applies the rotation animation
`@keyframes`	Defines the animation sequence
`transform: rotate()`	Rotates the element

Basic Animated Loader Ring

The following example creates a simple spinning loader ring with accompanying text

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .loader {
        border: 8px solid #e3e3e3;
        border-radius: 50%;
        border-top: 8px solid #3498db;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

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

    .loading-text {
        color: #666;
        font-size: 18px;
        margin: 0;
    }
</style>
</head>
<body>
    <div class="loader"></div>
    <p class="loading-text">Loading...</p>
</body>
</html>

A blue spinning ring appears at the center of the page with "Loading..." text below it. The ring continuously rotates in a smooth clockwise motion.

Enhanced Multi-Color Loader

This example creates a more visually appealing loader with gradient colors

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: 'Segoe UI', sans-serif;
    }

    .loader-container {
        text-align: center;
    }

    .enhanced-loader {
        border: 6px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 6px solid #fff;
        border-right: 6px solid #ff6b6b;
        width: 80px;
        height: 80px;
        animation: colorSpin 1.5s ease-in-out infinite;
        margin: 0 auto 25px;
    }

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

    .loading-message {
        color: white;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 1px;
        margin: 0;
    }
</style>
</head>
<body>
    <div class="loader-container">
        <div class="enhanced-loader"></div>
        <p class="loading-message">Please wait...</p>
    </div>
</body>
</html>

A colorful spinning ring with white and red accents appears on a purple gradient background. The ring rotates smoothly with "Please wait..." text beneath it.

Pulsating Loader Ring

This example combines rotation with a pulsating effect for added visual interest

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #2c3e50;
    }

    .pulsating-loader {
        border: 5px solid #34495e;
        border-radius: 50%;
        border-top: 5px solid #e74c3c;
        border-bottom: 5px solid #f39c12;
        width: 50px;
        height: 50px;
        animation: pulse-spin 2s ease-in-out infinite;
    }

    @keyframes pulse-spin {
        0% { 
            transform: rotate(0deg) scale(1); 
            opacity: 1; 
        }
        50% { 
            transform: rotate(180deg) scale(1.1); 
            opacity: 0.8; 
        }
        100% { 
            transform: rotate(360deg) scale(1); 
            opacity: 1; 
        }
    }
</style>
</head>
<body>
    <div class="pulsating-loader"></div>
</body>
</html>

A ring with red and orange accents spins while simultaneously pulsating in size and opacity, creating a dynamic loading effect on a dark blue background.

Conclusion

CSS loader rings provide an effective way to improve user experience during loading states. By combining border styling, border-radius, and keyframe animations, you can create various spinning effects that keep users engaged while content loads.

Aman Gupta

Updated on: 2026-03-15T17:28:53+05:30

748 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next