Create a beautiful and modern glassmorphism loading animation using HTML and CSS only with this step-by-step tutorial. Perfect for web designers and developers.
Table of Contents
Glassmorphism is a user interface design trend that mimics the appearance of frosted glass. In this article, we will build an animated loader using a glassmorphism.
Glassmorphism is a design trend that involves creating user interface (UI) elements with a transparent or semi-transparent glass-like appearance. One common way to create a loading animation using this style is to use a spinning or pulsing circle or other geometric shape with a transparent or semi-transparent glass-like appearance. In this tutorial, we will show you how to create a glassmorphism loading animation using only HTML and CSS.
Let's start making an amazing glassmorphism loader Using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our glassmorphism loader.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glassmorphism effect. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our glassmorphism loader an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #917173, #2a3b36, #432c52);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.loader{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loader::before{
content:"";
background:rgba(255, 255, 255, 0);
backdrop-filter: blur(8px);
position: absolute;
width: 140px;
height: 55px;
z-index: 20;
border-radius: 0 0 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.274);
border-top: none;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082);
animation: anim2 2s infinite;
}
.loader div{
background: rgb(228, 228, 228);
border-radius: 50%;
width: 25px;
height: 25px;
z-index: -1;
animation: anim 2s linear infinite;
animation-delay: calc(0.3s* var(--i));
transform: translateY(5px);
margin: 0.2em;
}
.loader div:nth-child(2){
background: rgb(184, 219, 12);
}
.loader div:nth-child(3){
background: rgb(254, 12, 76);
}
.loader div:nth-child(4){
background: rgb(104, 80, 177);
}
@keyframes anim {
0%, 100%{
transform: translateY(5px);
}
50%{
transform: translateY(-65px);
}
}
@keyframes anim2 {
0%, 100%{
transform: rotate(-10deg);
}
50%{
transform: rotate(10deg);
}
} Final Output:
Conclusion:
In this tutorial, we have shown you how to create a simple glassmorphism loading animation using only HTML and CSS. We started by creating the HTML skeleton and styling the container, then added the glassmorphism effect using a pseudo-element. Finally, we created the loading animation and added some final touches.
Remember, this tutorial is just a starting point. You can customize the animation and make it more complex by adding more CSS properties and effects. Experiment and have fun with it!
Loading animations are important for keeping users engaged while they wait for a website to load. By incorporating a glassmorphism effect, you can create a sleek and modern loading animation that is sure to impress your visitors.
We hope you found this tutorial helpful and that you learned something new. If you have any questions or feedback, please let us know in the comments below.
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 😊
