Create Dots Loader with HTML and CSS
Creating a loader using HTML and CSS is a great way to enhance the user experience while waiting for content to load. Here's a step-by-step guide on how to make a simple loader:
Let's dive deeper into the HTML and CSS code to understand how the dot loader is created:
In the HTML code, we have a div element with the class loader. Inside this div, we have three child div elements, each with the class dot. These child div elements represent the dots of our loader.
Click the Run button
The .loader class is used to style the container of the loader. We're using Flexbox properties to center the loader both horizontally and vertically within its container, which in this case is the entire viewport (100vh).
The .dot class styles each individual dot. We set the width and height to 20 pixels, make them round using border-radius: 50%, and give them a dark color (#333). We also add a margin of 5 pixels horizontally to create space between the dots.
The animation property applies the bounce animation to each dot. It specifies the animation name (bounce), duration (0.8s), timing function (ease), and that it should repeat infinitely (infinite) with an alternating direction (alternate). This creates the bouncing effect.
Here, we define the bounce animation using @keyframes. It starts with the dot's initial position at 0%, where transform: translateY(0); means it's not moved vertically. Then, at 100%, the dot moves upward by 20px with transform: translateY(-20px);, creating the bouncing effect.
Finally, we add animation delays to the second and third dots to stagger their animations. This creates a cascading effect where each dot starts its animation slightly after the previous one.
You can customize the loader further by adjusting these CSS properties to fit your design preferences.
Comments
Post a Comment