When you click on someone’s website or application, you may have seen the loader spinner. If you are looking for a quick and easy way to create a Loading Spinner then this blog is written for you.
This blog will teach you how to create a Loading Spinner using HTML and CSS only. Loader Spinners are used in many applications and websites. Usually, this kind of animation appears when a web page is loading. In my recent blog post, I have provided more than 16 Login & Registration From Templates which could be helpful for you.
Loading spinners are used when retrieving data or performing slow computations. They notify the user that their request is being processed. To keep your visitors and content watchers engaged while the page’s content loads, you may utilize loaders.
Have a look at the given image of the Loading Spinner. As you can see on the Loading Spinner, there is one plain color background and one spinner. This loader rotates 360 degrees indefinitely and smoothly.
I have explained all the HTML and CSS code that I have used to create this CSS Loading Spinner also if you want to make this CSS Loader with me step by step, then you can watch the video tutorial that I have given below.
Create a Loading Spinner in HTML & CSS | Video tutorial
All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you can create this Navigation Menu Hover Animation.
As you have seen in the video tutorial of this Loading Spinner. This type of loading is much more attractive and enhances user satisfaction.
I hope now you can create this Loading Spinner in HTML and CSS. If you want to take all the HTML and CSS code I have used to create this CSS Loader then all the source codes are given below.
You May Like This Video:
Loading Spinner in HTML CSS [Source Codes]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Loading Spinner by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Loading Spinner | CoderGirl </title>
<!---Custom Css File!--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="spinner"></div>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4285f4;
}
.spinner{
width: 80px;
height: 80px;
border: 7px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spinner 0.7s linear infinite;
}
@keyframes spinner{
from{}
to{
transform: rotate(360deg);
}
}
That’s all, now you’ve successfully created a project on CSS Loading Spinner. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
