Learn how to create a neumorphic loading indicator using HTML and CSS with this step-by-step tutorial. Improve your web design skills with gradient and neumorphic design.
Table of Contents
In this tutorial, we will be designing a visually stunning and modern loading indicator using the latest design trend of Neumorphism and CSS gradients. Neumorphism is a design style that combines the use of soft, raised and pressed effects to create a 3D look and feel. By combining this style with the use of gradients, we can create a loading indicator that not only serves its purpose but also adds a beautiful and unique touch to our website or application. We will be using HTML and CSS to create this loading indicator, and by the end of this tutorial, you will have a solid understanding of how to create your own Neumorphic Gradient Loading Indicator.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing neumorphic gradient loading indicator Using HTML, and CSS step by step.
Join My Telegram Channel to Download the More Project: Click Here
Source Code
Step 1 (HTML Code):
To get started, we will first create an HTML file that will serve as the foundation for our loading indicator. In this file, we will define the structure of our indicator using HTML elements such as divs and spans.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
This is the basic structure of our loading indicator using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Now that we have the basic structure of our loading indicator in place, we can begin styling it using CSS.
In your text editor, create a new file and save it with the .css extension (e.g. "styles.css").
Link this css file to your HTML file by adding the following code within the head tag of your HTML file:
<link rel="stylesheet" type="text/css" href="loader.css">Now, in your CSS file, start by targeting the container "div" of our loading indicator by its id.
Set the width and height of the container to be a square shape and center it on the page.
Now we will style the inner "span" element to create the actual loading indicator. First, give the span a width and height of 100% so that it will fill the container.
To create the Neumorphic effect, we will use the CSS box-shadow property to create the raised and pressed effects.
Next, we will add a gradient background to the span to create a visually stunning loading animation. We can use the CSS linear-gradient function to create the gradient.
Finally, we can add animation to the loading indicator to make it move. We will use the CSS animation property to create the animation.
With these steps, you should have a working Neumorphic Gradient Loading Indicator. You can play around with different colors, animation, and effect to make it more unique and fitting to your project.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #240229;
}
#loader {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #240229;
overflow: hidden;
box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(255, 255, 255, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
#loader:before {
content: "";
position: absolute;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
z-index: 10;
background: #240229;
border-radius: 50%;
border: 2px solid #240229;
box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.5);
}
#loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: -1;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
filter: blur(20px);
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} Final Output:
Conclusion:
In conclusion, we have learned how to create a neumorphic gradient loading indicator using HTML and CSS. Neumorphic design is a popular trend in web design that mimics real-life objects, creating a sense of depth and tactility. Loading indicators are an essential part of web design that provides feedback to the user that their request is being processed. By following the step-by-step instructions in this tutorial, you can incorporate neumorphic design and gradient effects into your own web projects.
Remember, loading indicators are an important aspect of user experience, so make sure to incorporate them into your projects. Additionally, this tutorial provides a foundation for incorporating neumorphic design elements into your web design, so feel free to experiment with different styles and variations. As always, continue to learn and explore new techniques to enhance your web design skills.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
