How to Create Neumorphism Loading Spinner in HTML & CSS ?

Last Updated : 29 Feb, 2024

Neumorphism (neomorphism) is a modern way of styling the elements of any web page and providing a 3D effect. The spinner can be created using a div element with a specific class for styling, and then CSS can be used to define the shape, size, and color of the spinner. Additionally, CSS animations can be applied to create the spinning effect.

Screenshot-2024-02-26-154229

Approach:

First start with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.
Create a div with a specific class for the loader container.
Import external resources like a CSS file for styling.
Use CSS animations to create the spinning effect for the loader.
Style the loader container using CSS, including border, border-radius, and box-shadow properties to achieve the Neumorphism effect.
CSS animations are applied to the loader elements using the @keyframes rule. This rule defines the animation’s keyframes, such as the starting and ending points of the animation, and the animation’s duration and timing function.

Example: Implementation to design Neumorphism Loading Spinner

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Neumorphism Loader</title>
    <link rel="stylesheet"
          type="text/css" href="style.css" />
</head>
 
<body>
    <div class="loader">
        <span></span>
    </div>
</body>
 
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f1f1f1;
}
 
.loader {
    position: relative;
    width: 200px;
    height: 200px;
    border: 4px solid #f1f1f1;
    border: 4px solid white;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
        10px 10px 10px rgba(0, 0, 0, 0.1),
        inset -10px -10px 15px rgba(255, 255, 255, 0.5),
        inset 10px 10px 10px rgba(0, 0, 0, 0.1),
}
 
.loader::before {
    content: '';
    position: absolute;
    top: 25px;
    Left: 25px;
    right: 25px;
    bottom: 25px;
    background: #f1f1f1;
    border-radius: 50%;
    border: 4px solid #f1f1f1;
    box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5),
        inset 10px 10px 10px rgba(0, 0, 0, 0.1)
}
 
.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    z-index: -1;
    filter: blur(20px);
    animation: animate 0.5s linear infinite;
}
 
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
 
    100% {
        transform: rotate(360deg);
    }
}