How To Create A Loader Using Only HTML and CSS?



To create a loader like this by using only HTML and CSS. 

 

STEP 1:

Create an HTML file and type this code.

<!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>Loading</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loader"></div>
</body>
</html>  

 

STEP 2:

Create a CSS file and type this  code.

.loader{
    width: 70px;
    height: 70px;
    border: 10px solid rgb(207, 207, 207);
    border-top: 10px solid red;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 250px;
    animation-name: loader;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes loader{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform:rotateZ(360deg);
    }
} 

Output

Copy the code from Our Github


Trending Posts

The Secret to Flawless Web Design: Mastering Responsive Layouts

Image
Ever visited a website that looked great on your laptop but was a total mess on your phone? Maybe the text was too small, the images were all over the place, or buttons were impossible to click. Annoying, right? Well, that’s exactly why responsive web design is a game-changer. If you’re a web developer (or aspiring to be one), mastering responsive layouts is the secret sauce to making websites look flawless on all devices —whether it’s a massive desktop monitor, a tablet, or a tiny smartphone screen. What is a Responsive Layout? A responsive layout is a web design approach where your website automatically adjusts to fit any screen size. Instead of designing separate sites for desktop and mobile, responsive design ensures one website works everywhere. Why Does It Matter? Better User Experience (UX): No one likes zooming in and out just to read content. SEO Boost: Google ranks mobile-friendly websites higher. More C...
Read More

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!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>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">      ...
Read More

How To Create A Parallelogram Using HTML and CSS?

Image
STEP 1: Add <div class="parallelogram"></div> into your HTML document inside <body> section. STEP 2: Add this CSS code. .parallelogram{   width: 250px;   height: 150px;   background-color: black;   transform: skew(-30deg);  } Output The width: 250px and height: 150px give width and height to the object. The background-color: black; make the object's background color black to make it visible. Then, the transform: skew(-30deg); property skew the object in X-axis by -30degree. And the parallelogram is created using HTML and CSS.
Read More

Will DeepSeek AI Replace Web Developers? A JavaScript Developer’s Reality Check

Image
Why Tools Like DeepSeek Are Allies—Not Enemies—for Coders The rise of AI coding tools like DeepSeek, GitHub Copilot, and ChatGPT has sparked panic in developer communities. Headlines scream, “AI will replace programmers!” But as a JavaScript developer who’s tested these tools extensively, I’m here to say: AI won’t steal your job—but developers who use AI will outperform those who don’t. Let’s break down why, with real code examples and hard truths. 1. What AI Can Do Today (Spoiler: It’s Impressive… and Flawed) a. Boilerplate Code Generation Ask DeepSeek to “create a React todo list with local storage,” and it’ll spit out functional code in seconds. Here’s a snippet it generated for me: import React, { useState } from 'react'; function TodoApp() { const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || []); // ... rest of the component } The catch: It used localStorage directly in the component, ignoring best practices like cus...
Read More

What is the Main Goal of Generative AI?

Image
Ever seen an AI write a poem, generate a painting, or compose a song? It almost feels like magic. But it's not—it’s generative AI at work! AI has come a long way from just answering questions or giving recommendations. Now, it can actually create things. From helping artists brainstorm ideas to assisting businesses with content creation, generative AI is changing the game. But what’s the real goal here? Is AI trying to replace human creativity? (Spoiler: No, it’s not.) Let’s break it down in simple terms. What is Generative AI? (In Plain English) Before we dive into the “why,” let’s get a quick grip on the “what.” Generative AI is a type of artificial intelligence that creates new content—be it text, images, music, or even code. Unlike regular AI, which mainly recognizes patterns and provides answers, generative AI actually produces unique content from scratch. ChatGPT – Writes text, answers questions, and even t...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

Difference Between Java and JavaScript: A Complete Guide

Image
If you're new to coding, you might think Java and JavaScript are closely related just because they share "Java" in their names. But in reality, they are as different as a car and a carpet! In this blog, we'll break down the key differences between Java and JavaScript, covering everything from syntax to use cases. 1. Introduction: Java vs JavaScript Both Java and JavaScript are popular programming languages, but they serve different purposes: Java is a powerful, object-oriented programming language mainly used for backend development, Android apps, and enterprise applications. JavaScript is a lightweight, interpreted scripting language primarily used for web development to create interactive front-end experiences. Let’s dive deeper into their differences. 2. Origin and History Feature Java JavaScript Developed By Sun Microsystems (now owned by Oracle) Netscape (Brendan Eich) First Released 1995 1995 Initially Designed For Standalone applicati...
Read More

How To Create A Trapezium Using HTML and CSS?

Image
STEP 1: Add <div class="trapezium"></div> in your HTML document in the <body> section. STEP 2: Add this CSS code. .trapezium{ border-width: 100px; border-style: solid; border-color: transparent transparent black transparent; width: 200px;  }   Output The border-width: 100px; property gives width to the border, border-s tyle: solid; makes the border surface area solid, and border-color: transparent transparent black transparent; make the top, left, right side border transparent and keep the bottom border black which creates a triangle. Then, the width: 200px; property extends it to make a trapezium or trapezoid.
Read More

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log ...
Read More

How To Create A Semi-circle Using Only HTML and CSS?

Image
STEP 1: Add a <div class="semi-circle"></div> in the body section of an HTML document. STEP 2: Go To your CSS file and add this code.  .semi-circle{  width: 150px;   height: 75px;   background-color: black;   border-radius: 100px 100px 0 0; } Output The width: 150px; and height: 75px; gives width and height and create a rectangle. Then, background-color: black; gives color to the background so that we can see the actual rectangle created. And the last one, border-radius: 100px 100px 0 0; , it create a rounded border on the top-left and top-right corner of  the rectangle. The two zeros in ( border-radius: 100px 100px 0 0 ; ) is for the border-radius for bottom-right and bottom-left and we kept it width 0 to make it look like a semi-circle.
Read More