Hey guys, Today we are going to create a loading spinner using CSS. Loading Spinner is used to show the loading activity on a website. A loading screen is very useful when a website loads the data from the back-end. It is also very useful to engage the audience while loading data.
Table of Contents
Loading Spinner Using CSS
What is Loading?
Loading is a process while a website loads data from the backend server.
What is Loading Animation?
Loading animations are notifications that reassure users that the system is still handling their requests.
index.html
<!DOCTYPE html>
<head>
<title>Loading Spinner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loadingSpinner"></div>
</body>
</html>style.css
.loadingSpinner {
pointer-events: none;
width: 3em;
height: 3em;
border: 0.4em solid transparent;
border-color: #ddd;
border-top-color: blue;
border-radius: 50%;
animation: spinner 1s linear infinite;
}
@keyframes spinner {
100% {
transform: rotate(360deg);
}
}What is animation?
CSS allows us to create smooth animations without using javascript or Flash. Animation needs some of important properties @keyframes, animation-name, animation-duration, animation-delay, etc.
animation: spinner 1s linear infinite;In this, we have created animation as a spinner (name of animation), 1s (animation duration), linear (animation-timing-function), infinite (animation-iteration-count).
What is em?
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. … Declarations such as text-indent: 1.5em and margin: 1em is extremely common in CSS. The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font.
What are pointer-events?
The pointer-events property defines whether or not an element reacts to pointer events.
Property Values
| Property Value | Description |
|---|---|
| auto | The element reacts to pointer events, like hover and click. This is default |
| none | The element does not react to pointer events |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code is also available on Github Click Here!
Read our previous post on Panda Login form, designed with awesome animation.
Hope you like this blog please like, comment, and share it with your friends!
