In today's digital age, loading spinners are commonly used to indicate that a webpage or application is busy processing or fetching data. These visual cues help manage user expectations and provide feedback during waiting periods. In this article, we will explore how to create a basic CSS loader Emoji animation.
CSS Loader Code:
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loader span {
font-size: 80px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader">
<span>⏳</span>
</div>
</body>
</html>Let's break down the code and understand it:
The CSS rules define a " loader " class that sets the display to flex and centers its content vertically and horizontally using justify-content: center; and align-items: center;.
Within the "loader" class, there is a nested rule for the "span" element. It sets the font size to 80 pixels and applies an animation called "spin" with a duration of 1 second, linear timing, and an infinite loop.
The @keyframes rule defines the "spin" animation. It specifies two keyframes: 0% and 100%. At 0%, the spinner element has no rotation (transform: rotate(0deg)). At 100%, the spinner element completes a full rotation of 360 degrees (transform: rotate(360deg)).
Moving on to the <body> section, there is a <div> element with the "loader" class. It serves as a container for the spinner.
Inside the <div>, there is a <span> element that displays the hourglass emoji (⏳). This will be the element that rotates and creates the spinning effect.
When you load this HTML document in a web browser, it will display a full-screen loading spinner with an hourglass symbol that continuously rotates using the CSS animation defined in the code.
Output:
