Adding a Stylish Loading Effect Using HTML and CSS
Introduction
In this tutorial, we'll guide you through the process of creating a visually appealing loading animation using HTML and CSS. Loading animations are an essential part of web design, providing users with feedback that content is being loaded or processed. We will create a unique loading animation with colorful bars that move dynamically, enhancing the user experience on your website.HTML Structure
Let's start by setting up the HTML structure for our loading animation. We will use a <div> element with multiple child <div> elements to represent the animated bars.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</body>
</html>
CSS Styling
Now, let's apply the CSS styles to create the loading animation with colorful bars that move in a fluid manner.
/* Set the background and positioning */
body, html {
background-color: #1c2020;
height: 100%;
position: relative;
overflow: hidden;
}
/* Loader styling */
.loader {
margin: 0 auto;
width: 60px;
height: 50px;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
/* Bar animation */
.loader > div {
height: 100%;
width: 8px;
display: inline-block;
float: left;
margin-left: 2px;
animation: delay 0.8s infinite ease-in-out;
}
/* Define colors for each bar */
.bar1 { background-color: #754fa0; }
.bar2 { background-color: #09b7bf; }
.bar3 { background-color: #90d36b; }
.bar4 { background-color: #f2d40d; }
.bar5 { background-color: #fcb12b; }
.bar6 { background-color: #ed1b72; }
/* Animation keyframes */
@keyframes delay {
0%, 40%, 100% { transform: scaleY(0.05); }
20% { transform: scaleY(1.0); }
}
ConclusionIn this tutorial, we learned how to create an engaging loading animation using HTML and CSS. By combining CSS animations and keyframes, we achieved a visually pleasing effect that adds a touch of excitement to the loading process on your website. You can customize the colors and animation duration to match your site's design. With this loading animation, users will experience a smoother and more enjoyable interaction while waiting for content to load.