how to make a loader in html

mostly big websites using the loader to give an amazing look for their website.

if you have an interest in html and web development then definitely you want to build a loader in your project.
 so today we are going to learn how to make a loader in html.

a loader like

why you should use a loader

most of the developers always think for their website loading speed. the speed of the website loading depends on the internet but nowadays we have a fast net connection however still there is a time between the website fully loaded.so there is a way to increase the users' interest in our website using a loader. a loader can easily build using below steps:

1. add  HTML

<div class="se-pre-con"></div>

2. CSS

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. the output is

How To Create A Loader

The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle. The blue thing that spins around inside the border is specified with the border-top property. You can also include border-bottom, border-left and/or border-right if you want more "spinners" (see example below). The size of the loader is specified with the width and height properties. At last, we add an animation that makes the blue thing spin forever with 2-second animation speed. Note: You should also include a -webkit- prefix for browsers that do not support animation and transform properties. Click on the example to see how

so finally we build a loader using html and CSS.