Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set logo inside loader using CSS?

CSS Web Development Front End Technology

To set a logo inside a loader using CSS, you need to create a loader animation and position a logo image at its center. This technique is commonly used to maintain brand identity during page loading states and provides a professional user experience.

Syntax

.loader {
    /* Loader styles and animation */
}

.loader img {
    /* Logo positioning and counter-animation */
}

@keyframes loaderSpin {
    /* Loader rotation animation */
}

@keyframes logoCounterSpin {
    /* Logo counter-rotation to keep it stationary */
}

Basic Loader Creation

First, let's create a simple circular loader 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }
    
    .loader {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="loader"></div>
    </div>
</body>
</html>

A blue and gray circular loader spinning clockwise appears centered on the page.

Adding Logo Inside Loader

Now let's add a logo inside the loader. The key is to apply counter-rotation to keep the logo stationary while the loader spins 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        font-family: Arial, sans-serif;
    }
    
    .loader-with-logo {
        border: 6px solid #e3e3e3;
        border-top: 6px solid #04802f;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        position: relative;
        animation: loaderSpin 2s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .loader-with-logo img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        animation: logoCounterSpin 2s linear infinite;
    }
    
    @keyframes loaderSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @keyframes logoCounterSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="loader-with-logo">
            <img src="/static/images/client/science.svg" alt="Logo">
        </div>
    </div>
</body>
</html>

A green circular loader with a stationary logo image in the center. The loader border spins while the logo remains fixed in position.

Advanced Loader with Brand Colors

Here's a more sophisticated loader using brand colors and improved styling 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 50px;
        background-color: #f8f9fa;
    }
    
    .brand-loader {
        border: 8px solid rgba(52, 152, 219, 0.1);
        border-left: 8px solid #3498db;
        border-right: 8px solid #e74c3c;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        position: relative;
        animation: brandSpin 1.5s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px auto;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .brand-loader .logo {
        width: 80px;
        height: 80px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: logoStabilize 1.5s linear infinite;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .brand-loader .logo img {
        width: 50px;
        height: 50px;
    }
    
    @keyframes brandSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @keyframes logoStabilize {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }
</style>
</head>
<body>
    <div class="brand-loader">
        <div class="logo">
            <img src="/static/images/client/science.svg" alt="Brand Logo">
        </div>
    </div>
</body>
</html>

A professional-looking loader with blue and red borders spinning around a white circular background containing a centered logo. The logo remains stationary while the colored borders rotate smoothly.

Key Points

  • Use position: relative on the loader container and position: absolute on the logo for precise positioning
  • Apply counter-rotation to the logo to keep it stationary while the loader spins
  • Ensure the logo dimensions are smaller than the loader's inner area
  • Use display: flex with centering properties for easy logo positioning

Conclusion

Setting a logo inside a CSS loader enhances brand recognition during loading states. The key technique is applying counter-rotation animations to keep the logo stationary while the loader spins around it.

Updated on: 2026-03-15T16:15:08+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements