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

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

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

Why iPhones Don't Have Memory Card Slots?

Image
Do you know that iPhone user can't use the memory card to increase their smartphone storage? Apple iPhone doesn't have any microSD card slot to put the memory card. That means Apple doesn't want to allow its user to use a memory card in their iPhone. But, Why? Why Apple Doesn't Allow Its User to Use Memory Card on iPhone? Why iPhones Don't Have Memory Card Slots? There could be various reasons. But one of the main reasons is that the memory card actually slows the smartphone performance. You Can Also Read This Article Called Why You Should Not Use Memory Card On A Smartphone? to know why and how a memory card slows down your smartphone performance. Apple doesn't allow its user to use memory cards because Apple doesn't want to ruin its brand value because of a slow memory card. Memory cards actually have read/write speeds. Memory cards with low read/write speed are cheap, and the high read/write speed of memory cards is expensive. People mostly buy a cheap m...
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

Create a Stunning Personal Portfolio Website with HTML & CSS

Image
Are you looking to design an impressive personal portfolio website that showcases your skills, projects, and contact information? In this post, I’ll guide you through a simple yet elegant portfolio website built using HTML and CSS. Whether you’re a beginner or an experienced developer, this project can be a great addition to your web development journey. Project Overview This portfolio website is designed to highlight your personal and professional details in a clean and visually appealing way. It features multiple sections like About Me , Skills , Portfolio , and Contact Form . The design is responsive, making it accessible on all devices, including desktops, tablets, and smartphones. Features of the Portfolio Navigation Bar: Smooth navigation to all sections with a stylish hover effect. Intro Section: A bold introduction with a profile image and social links. About Me: A...
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

4 Website To Use If You Use The Internet

Image
  Internet is an awesome place. You can find almost everything you want. In that everything, you can also find some bad things like a virus, malicious app, etc. and to be safe from all those malicious files and things, below I have mentioned 4 Website to be safe on the Internet. VirusTotal.com VirusTotal.com is a website that analyzes the files/URL link and detects if there are viruses and malicious files or not. You just need to upload the file/app or the URL of the website to check it. You should use this website if you download files and apps from different websites.   haveibeenpwned.com HaveIBeenPwned.com is a website that will check if your email account is hacked/compromised or not. If you ever find something suspicious on your account like someone is trying to log in or someone is accessing your account and changing information then you must check this website. who.is Who.is is a website that stores the registered information of domain name and IP. You can check the inf...
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