Hello everyone, today we will be creating a preloader using HTML and CSS. In the past, I have shared many videos and articles about JavaScript projects, but this time we will be working on something different. Preloaders, also known as “loading indicators,” are used to inform users that a webpage or application is loading or processing. Preloaders are often used to improve the user experience by providing visual feedback while the content is being loaded. To create a preloader using HTML and CSS, you will need to use a combination of HTML elements and CSS styles. Here is a high-level overview of the steps involved:
- Create an HTML element to contain the preloader. This could be a div element or any other suitable element.
- Add a loading message or graphic inside the container element. This could be a simple text message or a more complex graphic such as a spinning icon.
- Use CSS styles to style the container element and the loading message or graphic. For example, you could set the background color of the container element, or adjust the size and color of the loading message or graphic.
- Use JavaScript to control the visibility of the preloader. When the webpage or application is ready, you can use JavaScript to hide the preloader and show the main content.
Here’s a video tutorial on how to create a preloader using HTML and CSS.
To create this program (Preloader). First, you need to create three Files one HTML File and another one is CSS File and last one JavaScript File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create preloader</title>
<link rel="stylesheet" href="./style.css">
<!-- www.youtube.com/STech04 -->
</head>
<body>
<div class="circle" data-dots="25"></div>
<script src="./script.js"></script>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
}
.circle
{
width: 100px;
height: 100px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.circle .point
{
width: 9px;
height: 9px;
background: #fff;
border-radius: 50%;
position: absolute;
transform: rotate(calc(var(--i)*var(--rot))) translate(-50px) scale(0);
animation: animate 0.7s linear infinite;
animation-delay: calc(var(--i)*0.03s);
}
@keyframes animate
{
0%,100%
{
transform: rotate(calc(var(--i)*var(--rot))) translate(-50px) scale(0);
}
50%
{
transform: rotate(calc(var(--i)*var(--rot))) translate(-50px) scale(1);
}
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const circle = document.querySelector(".circle");
let dots = circle.getAttribute("data-dots");
let rotate = 360 / dots;
points = "";
for (let i = 0; i < dots; i++) {
points+=`<span> class="point" style="--i: ${i}; --rot: ${rotate}deg;"></span>`
}
circle.innerHTML = points;
Congratulations, you have now successfully created a preloader program using HTML, CSS, and JavaScript. If you encounter any issues or errors with your code, you can download the source code files by clicking on the provided download button. The files are free and will be in a .zip format, which you will need to extract.
