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.
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
@keyframesrule. 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);
}
} |
Output: