loading spinner using css
loading spinner using css

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 ValueDescription
autoThe element reacts to pointer events, like hover and click. This is default
noneThe element does not react to pointer events
initialSets this property to its default value.
inheritInherits 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!

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply