Article Categories

Selected Reading

Creating an Advanced Loading Screen in CSS

CSS Web Development Front End Technology

Creating an advanced loading screen in CSS enhances user experience by providing visual feedback during page loading or processing. These animated loading indicators keep users engaged while content loads in the background.

Syntax

@keyframes animation-name {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loader {
    animation: animation-name duration timing-function iteration-count;
}

Method 1: Circular Progress Loader

This example creates a circular loading screen with a percentage indicator and animated border

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: #111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    h2 {
        color: white;
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .loader-container {
        position: relative;
        width: 200px;
        height: 200px;
        border: 4px solid #333;
        border-radius: 50%;
        overflow: hidden;
    }
    
    .loader-container::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 300%;
        height: 300%;
        background: conic-gradient(#4CAF50, #2196F3, #4CAF50);
        border-radius: 50%;
        animation: rotate 2s linear infinite;
    }
    
    .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2rem;
        font-weight: bold;
        z-index: 10;
    }
    
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>
</head>
<body>
    <h2>Loading...</h2>
    <div class="loader-container">
        <div class="percentage">75%</div>
    </div>
</body>
</html>

A dark page displays with "Loading..." text above a circular loader. The loader shows "75%" in the center with a rotating gradient border that spins continuously in green and blue colors.

Method 2: Dual-Color Border Spinner

This approach creates a simple spinning loader with alternating colored borders

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    
    .spinner {
        width: 80px;
        height: 80px;
        border: 8px solid #ddd;
        border-top: 8px solid #3498db;
        border-right: 8px solid #e74c3c;
        border-radius: 50%;
        animation: spin 1.5s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

A circular spinner appears centered on a light gray background. The spinner has gray borders with blue and red accent borders that rotate smoothly in a continuous clockwise motion.

Method 3: Pulsing Dots Loader

This example demonstrates a modern three-dot pulsing animation

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #2c3e50;
    }
    
    .dots-loader {
        display: flex;
        gap: 10px;
    }
    
    .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #3498db;
        animation: pulse 1.4s ease-in-out infinite both;
    }
    
    .dot:nth-child(1) { animation-delay: -0.32s; }
    .dot:nth-child(2) { animation-delay: -0.16s; }
    .dot:nth-child(3) { animation-delay: 0s; }
    
    @keyframes pulse {
        0%, 80%, 100% {
            transform: scale(0.6);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>
</head>
<body>
    <div class="dots-loader">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</body>
</html>

Three blue dots appear horizontally centered on a dark blue background. The dots pulse in sequence, scaling up and down with changing opacity to create a wave-like loading animation.

Key Animation Properties

Property	Description	Example Value
`animation-duration`	Time for one complete cycle	`2s`
`animation-timing-function`	Speed curve of animation	`linear`
`animation-iteration-count`	Number of times animation repeats	`infinite`
`animation-delay`	Delay before animation starts	`0.5s`

Conclusion

Advanced loading screens in CSS improve user experience by providing engaging visual feedback during loading processes. Using keyframes, transforms, and animation properties, you can create professional loaders that keep users engaged while content loads.

Tanmay Chandhok

Updated on: 2026-03-15T15:40:42+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next