How to Create a Stunning Glassmorphism Loader with HTML and CSS
Step-by-Step Guide to Making a Glassmorphism Loader with HTML and CSS
The world of web development is ever-evolving, with designers and developers continually pushing the boundaries of what’s possible on the web. One such trend that has gained significant traction is glassmorphism. Combining the best aspects of both skeuomorphism and flat design, glassmorphism brings a sleek, modern, and elegant touch to UI elements. In this tutorial, we'll walk you through creating a stunning glassmorphism loader using HTML and CSS. This project is part of day 39 of the #100DaysOfCode Challenge.
What is Glassmorphism?
Glassmorphism is a design style characterized by a transparent or semi-transparent background, blurred effects, and frosted glass-like visuals. This style enhances the visual hierarchy and aesthetics of web elements, making interfaces more engaging and user-friendly.
Prerequisites
Before diving into the code, ensure you have a basic understanding of HTML and CSS. Familiarity with CSS animations and properties like backdrop-filter will be beneficial.
Step-by-Step Guide to Creating a Glassmorphism Loader
1. Setting Up Your HTML File
First, create an HTML file. This file will contain the structure of our loader.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Ensure compatibility with Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the viewport to make the website responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to external CSS file -->
<link rel="stylesheet" href="style.css">
<title>Glassmorphism Loader</title>
</head>
<body>
<!-- Loader container with glassmorphism effect -->
<div class="loader">
<!-- Individual loader elements with varying CSS custom properties -->
<div style="--i: 1"></div>
<div style="--i: 2"></div>
<div style="--i: 3"></div>
<div style="--i: 4"></div>
</div>
</body>
</html>
This code sets up a basic HTML document with a div container for our loader. Each inner div will represent a part of the loader animation.
2. Crafting the CSS File
Next, create a style.css file. This file will handle the styling and animation of our loader.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000046;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1CB5E0, #000046);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
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 infinite linear;
animation-delay: calc(-0.3s * var(--i));
transform: translateY(5px);
margin: 0.2em;
}
@keyframes anim {
0%,
100% {
transform: translateY(5px);
}
50% {
transform: translateY(-65px);
}
}
@keyframes anim2 {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
3. Understanding the CSS
Let’s break down the CSS to understand how it creates the glassmorphism effect and animations:
Global Styles: The universal selector (
*) removes default margin and padding, ensuring consistency across all elements. Thebox-sizing: border-boxrule ensures padding and borders are included in the element's total width and height.Body Styles: The body is styled with a gradient background and set to occupy the full viewport height. Flexbox properties center the loader both horizontally and vertically.
Loader Container: The
.loaderclass positions its children elements and includes a::beforepseudo-element to create the glassmorphism effect. Thebackdrop-filter: blur(8px)applies the blur effect.Loader Elements: Each
divinside the loader container is styled to look like a ball. They are animated with theanimkeyframes to move up and down, creating a bouncing effect.Animations: The
animkeyframes control the bouncing effect of the loader elements. Theanim2keyframes rotate the glassmorphism backdrop, enhancing the visual appeal.
4. Adding the Finishing Touches
To complete the loader, you might want to adjust the colors, sizes, or animation timing to fit your specific design needs. Here are a few tips:
Color Customization: Modify the
backgroundproperty in the.loader divclass to change the color of the loader balls.Size Adjustments: Change the
widthandheightproperties of the loader elements for different sizes.Animation Timing: Adjust the
animationproperties for speed or delay changes.
5. Testing the Loader
Save both files and open the HTML file in your browser. You should see a beautiful glassmorphism loader animating in the center of the screen. If something doesn’t look right, double-check your code for typos or errors.
Conclusion
Creating a glassmorphism loader is a fantastic way to add a modern, stylish touch to your web projects. By combining HTML and CSS, you can achieve stunning visual effects that enhance user experience. This tutorial walked you through the entire process, from setting up your files to understanding the CSS that brings the loader to life. With this knowledge, you're well-equipped to implement glassmorphism in your future projects.
For full source code and more exciting projects, download the files from here. If you have any questions or need further assistance, feel free to contact me.
Happy coding!