Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Neumorphism Loading Spinner in HTML and CSS
In this article, we will create a Neumorphism Loading Spinner using HTML and CSS. The loading spinner is a common UI element used to indicate a process in progress, such as loading content or waiting for data from the server. We'll add a modern touch to it using the Neumorphism design technique.
Neumorphic designs give a 3D look by combining highlights and shadows around elements, making them appear to protrude or sink into the surface.
Approach
Let's walk through the steps to create the Neumorphism loading spinner.
Setting Up the HTML Structure
We'll start by writing a simple HTML structure. The spinner will consist of a div element, and we will style it to create the Neumorphic effect.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
Adding CSS for Neumorphic Spinner
Next, we need to style our spinner using CSS. The key here is to add shadows in such a way that the element looks raised or pressed into the background. We'll make use of box-shadow properties to achieve this effect.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
CSS Code Explanation
- The body needs to be centered, horizontally and vertically using Flexbox. The background color is set to a soft light grey (#ecf0f3), which is the typical background color for Neumorphism designs. And the div centers the spinner using Flexbox.
- The most important part of Neumorphism is the box-shadow property. The shadows are strategically placed with different intensities and directions. The dark shadow (#b8b9be) on the bottom-right and the light shadow (#fff) on the top-left create the illusion of a raised 3D element.
- The animation property applies rotation using @keyframes. The spinner rotates indefinitely with the spin keyframes, which rotate it by 360 degrees in 1.5 seconds.
- The .spinner::before creates an inner rotating element that simulates the actual loading spinner. It has a border with a colored top border (#3498db), creating a rotating arc effect.
Example
After combining the HTML and CSS codes, we can get the result of the Neumorphism Loading Spinner.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neumorphism Loading Spinner</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
</style>
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
Output
168 Views
