Are you ready to add a touch of elegance to your web projects? In this tutorial, we’ll guide you through the process of creating a stunning Neumorphism loader. This project is part of Day 18 of the #100DaysOfCode Challenge. Let’s dive in!1. Introduction to Neumorphism:
Neumorphism, also known as “soft UI,” is a design trend that combines elements of skeuomorphism and flat design to create interfaces that appear to be slightly raised from the background. This aesthetic has gained popularity for its modern and elegant appearance.
2. Setting Up the Project:
Download the full source code from here to get started. Once downloaded, extract the files to your desired location.
3. HTML Structure:
Open the HTML file (index.html) in your preferred code editor. Define the basic structure of the HTML document, including <!DOCTYPE html>, <html>, <head>, and <body>. Link the necessary CSS and JavaScript files.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Neumorphism Loader</title>
</head>
<body>
<div class=”loading-box”>
<p class=”loading-title”>Loading</p>
<div class=”loading-circle”>
<p class=”loading-count”><span id=”loadingNumber”>0</span>%</p>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
4. Styling with CSS:
Open the CSS file (style.css) and add styles to create the Neumorphism effect. This includes defining styles for the body, loading box, loading title, loading circle, and loading count.
@import url(“https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap”);
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #1d1e22;
display: flex;
justify-content: center;
align-items: center;
font-family: “Quicksand”;
}
.loading-box {
position: relative;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #f0f8ff;
border-radius: 12px;
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5), -4px -4px 16px rgba(255, 255, 255, 0.05);
}
.loading-title {
font-size: 1.5em;
transform: translateY(-12px);
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 300;
}
.loading-circle {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 180px;
background: conic-gradient(from 0deg at 50% 50%, rgba(111, 123, 247, 1) 0%, rgba(155, 248, 244, 1) 0%, #101012 0%);
border-radius: 100px;
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.75), -4px -4px 16px rgba(255, 255, 255, 0.1);
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-count {
content: ” “;
display: flex;
justify-content: center;
align-items: center;
top: 3px;
left: 3px;
width: 174px;
height: 174px;
border-radius: 100px;
background: #1d1e22;
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.75) inset, -4px -4px 16px rgba(255, 255, 255, 0.1) inset;
animation: spin 1s infinite linear reverse;
}
.loading-count #loadingNumber {
font-size: 4em;
}
5. Adding JavaScript Functionality:
Open the JavaScript file (script.js) and define the functionality to update the loader. This includes selecting the necessary elements and setting up an interval to increment the loader value.
const loadingNumber = document.querySelector(“#loadingNumber”);
const loadingCircle = document.querySelector(“.loading-circle”);
let load = 0;
setInterval(updateLoader, 150);
function updateLoader() {
load += load < 100;
loadingNumber.innerHTML = load;
loadingCircle.style.background =
“conic-gradient(from 0deg at 50% 50%, rgba(111, 123, 247, 1) 0%, rgba(155, 248, 244, 1) ” +
load +
“%, #101012 ” +
load +
“%)”;
}
6. Conclusion:
Congratulations! You’ve successfully created a beautiful Neumorphism loader for your web projects. This project not only enhances user experience but also adds a touch of sophistication to your website or application. Keep exploring and experimenting with different design trends to stay ahead in the world of web development.
For more exciting projects and coding tutorials, feel free to connect with me on Bento!
Happy coding! 🚀🎨 #100DaysOfCode
Feel free to adjust the content to better match your style and preferences. Let me know if you need further assistance!
Source: hashnode.com