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

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

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

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 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

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

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

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Image
Right now, In a smartphone, you will get a 48MP Camera, 64MP Camera, 108MP Camera, and so on. But, Does this number of megapixels improve the image quality? What is a Megapixel? Megapixel means a million pixels in an image. Pixel is the small dot or square on the image. By combining millions of pixels, one image is formed. 1 Megapixel = 1 Million Pixel, 2 Megapixel = 2 Million Pixel, 12 Megapixel = 12 Million Pixel, 48 Megapixel = 48 Million Pixel, 64 Megapixel = 64 Million Pixel, and so on.   Does More Megapixel equal better image quality? No. A Megapixel is just a million pixels in an image. Many other factors also matter while capturing an image like Image Sensor, Aperture, Megapixel, Lens, and Software.    If you have a 108 Megapixel Camera with a small image sensor and a 12 Megapixel camera with a big image sensor. Then, The second one will have better quality. It's because, in a big image sensor, the pixel size is bigger. If the pixel size is bigger, it can capture...
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

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-...
Read More

How to Block a Website? A Simple Guide for All Devices

Image
Ever feel like you're spending way too much time on social media? Or maybe you want to make sure certain websites are off-limits for your kids? Whatever your reason, blocking a website is actually pretty easy. In this guide, I'll walk you through different ways to block a website on any device—whether you're on Windows, Mac, Android, or iPhone. Method 1: Block Websites Using the Hosts File (Windows and macOS) If you want a super effective way to block websites on your computer, tweaking the hosts file is the way to go. This method works system-wide, so once a site is blocked, no one using that computer can access it. Steps for Windows: Open Notepad as Administrator. Click File > Open and head over to C:\Windows\System32\drivers\etc\ . Change the file type to All Files and open hosts . Scroll to the bottom and add this: 127.0.0.1 facebook.com 127.0.0.1 www.facebook.com ...
Read More