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

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
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

Can I Code If I'm Bad at Math? (Spoiler: Yes, You Can!)

Image
Let’s be real — the moment you tell someone you’re learning to code, someone will say, “Whoa, you must be good at math, huh?” And if you’re like me (and probably 90% of the world), you immediately think: “Uh oh… I suck at math. Am I screwed?” The short answer? Nope. Not at all. Coding ≠ Math Class Here’s the truth that nobody told us in school: You don’t need to be a math genius to be a good coder. In fact, most web developers, app creators, and even software engineers barely touch “hard” math in their day-to-day work. You’re not solving calculus problems. You’re building cool stuff. Writing logic. Making things work. What You Actually Need Instead of Math If you’re bad at math but good at things like: Solving puzzles Breaking big problems into small steps Paying attention to details Being curious and googling solutions …then congrats. You already think like a progr...
Read More

Can a Computer Run Without RAM?

Image
To run a computer and smartphone, we need RAM. RAM is used to load the operating system and application in it. But, have you ever wondered what will happen if there is not any RAM inside the computer or smartphone. Can you use a Computer Without RAM? Can A Computer Run Without RAM? No, a computer will never run without RAM. If you turn on the computer without the RAM, your computer screen will be blank or BIOS firmware will open with an error called hardware missing. You cannot run a computer without RAM.  RAM is specially made for loading operating systems when you turn on the computer. RAM is different from storage devices that's why RAM is more expensive than storage devices. How Much RAM Do I Need In A Computer? How Much RAM Do I Need In A Smartphone? Why iPhones Run Smoothly With Less RAM than Android?
Read More

Can A Computer Virus Affect Hardware?

Image
Computer viruses are harmful programs that destroy, steal, manipulate the computer system. But, can a computer virus destroy the computer hardware? Like, it is a program that uses the computer hardware to run, right. Well, the answer might be or is no. Can A Computer Virus Affect Computer Hardware? No, basically. A computer virus is just a computer program written in code lines. It does the same thing that other computer programs do while in use. Like it uses a processor, RAM, storage for processing, and storing data. And with today's powerful computer hardware it is impossible for a virus to destroy or harm the computer hardware. Computer viruses usually manipulate the software, steal the data, crash the operating system. But, it doesn't destroy with the hardware part. But, there can be one scenario. It can indirectly damage your computer hardware like for example, a computer virus can turn off the CPU fans which will increase the heat and will damage your processor. But, it i...
Read More

Is iPhone More Secure Than Android Phone?

Image
   In the smartphone market, Android phones and Apple iPhones are very popular. But, did you ever think which is more secure for you/ for the user? Is iPhone More Secure Than Android? Yes, Apple iPhone is more secure than the Android because of the following reasons: Android Users: There are more Android Phone users than iPhones. Because of lots of Android users, it is targeted with lots of malware and viruses. Apple Doesn't Allow iPhones Users to Do Lots of Task: On an Android smartphone, you can do lots of customization, you can download install 3rd party Android Apps from anywhere, sharing files. All these things are advantages too. But, that increases the case of vulnerability and data theft of the user. On iPhone iOS, you cannot do all those customizations, installing Apps from anywhere, etc. iPhone does this to reduce the vulnerability and making their iPhone simple and the best. iPhone Software and Security Updates Most of the Android smartphone brands(not all the brand...
Read More

AI is Learning to Code — Should Web Developers Be Worried?

Image
If you’ve been keeping up with tech news lately, you’ve probably noticed a lot of buzz around AI tools like ChatGPT , GitHub Copilot , and AI-powered website builders . These tools are now able to write code, debug, and even design entire websites in a matter of minutes. Sounds pretty wild, right? Naturally, many web developers are starting to ask themselves: “Is AI going to replace me?” The short answer is: no, not really . But there’s a little more to it than that. In this post, we’re going to dig into how AI is shaping the future of web development and why you don’t need to panic — just adapt. What Can AI Do in Web Development Today? Before jumping into whether or not AI will replace developers, let’s take a look at what these AI tools can actually do right now. The truth is, they’re pretty impressive — but they still have their limits. 1. Code Generation AI is super efficient at generating code based on your prompts. For example, tools like GitHub Copilot can auto-comp...
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

🚀 Build a QR Code Generator Using HTML, CSS & JavaScript

Image
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript. This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs : CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js ✅ Features Generate QR codes instantly Accepts text or URL Press Enter to generate Download QR code as PNG Modern UI with smooth design 📌 Full Source Code (HTML, CSS & JavaScript) 📄 HTML Code <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="style.css">   <title>QR Code Generator</title> </head> ...
Read More

Is Coding a Stressful Job?

Image
Coding is the process of creating, designing, editing, and modifying a computer program. In this modern computer age, the demand for coding jobs and coders/programmers is high in general. Almost every business is online and digital and to maintain the business digitally, programmers are required. Hence, the increase in the demand for programmers or coding jobs in general. But, is it a good job to do? A few reasons why coding could be a stressful job are: You don’t love to sit in one place in front of your computer for long hours doing logical and creative tasks. You work for a company that gives you tasks out of your expertise or gives you a heavy load of tasks. You and your boss or colleague's taste doesn’t match. You are not a good coder. There could be several reasons behind coding being a stressful job. If you have anyone reason then just never do it. But if you love coding there is no stress. In general, every job is stressful, if you don’t like to do it or if you don’t enjoy ...
Read More