CSS Ring Loader, html full course, css full course, html and css full course

Glowing Ring Loader using HTML & CSS

Create a stylish neon loading animation for your website.

---

नमस्ते दोस्तों! (Hindi)

आज के इस ट्यूटोरियल में हम सीखेंगे कि कैसे आप केवल HTML और CSS का उपयोग करके एक सुंदर और आधुनिक Glowing Ring Loader बना सकते हैं। यह लोडर आपकी वेबसाइट को एक प्रीमियम और प्रोफेशनल लुक देता है। हमने इसमें CSS keyframes का उपयोग किया है ताकि छल्ले (rings) अलग-अलग दिशाओं में घूम सकें।

Welcome Everyone! (English)

In this tutorial, we will learn how to create a beautiful and modern Glowing Ring Loader using only HTML and CSS. This loader adds a premium and professional touch to your website. We have used CSS keyframes to make the rings rotate in different directions with a glowing neon effect.

Live Demo

Step 1: HTML Structure

HTML code is very simple. We are using four div elements with the class "ring".

<div class="count">
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
</div>

Step 2: CSS Styling

CSS use kiya gaya hai animation aur neon glow effect create karne ke liye.

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #111;
        }
        .count{
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .count .ring{
            position: relative;
            width: 150px;
            height: 150px;
            margin: -30px;
            border: 4px solid transparent;
            border-radius: 50%;
            border-top: 4px solid #24ecff;
            animation: animate2 4s linear infinite;

        }
        @keyframes animate{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .count .ring::before{
            content: "";
            position: absolute;
            top: 12px;
            left: 12px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: #24ecff;
            box-shadow: 0 0 0 5px #24ecff33,
            0 0 0 10px #24ecff22,
            0 0 0 20px #24ecff11,
            0 0 20px #24ecff,
            0 0 50px #24ecff;
        }
        .count .ring:nth-child(2){
            animation: animate2 4s linear infinite;
            animation-delay: -1s;
            border-top: 4px solid transparent;
            border-left:4px solid #93ff2d;
        }
        .count .ring:nth-child(2)::before{
            content: "";
            position: absolute;
            top: initial;
            bottom: 12px;
            left: 12px;
            width: 15px;
            height: 15px;
            background: #93ff2d;
            box-shadow: 0 0 0 5px #93ff2d33,
            0 0 0 10px #93ff2d22,
            0 0 0 20px #93ff2d11,
            0 0 20px #93ff2d,
            0 0 50px #93ff2d;
        }
        @keyframes animate2{
            0% {
                transform: rotate(360deg);
            }
            100% {
                transform:rotate(0deg);
            }
        }
           .count .ring:nth-child(3){
            animation: animate 4s linear infinite;
            animation-delay: -2s;
            border-top: 4px solid transparent;
            border-left:4px solid #e41cf8;
            position: absolute;
            top: -25.66px;
        }
        .count .ring:nth-child(3)::before{
            content: "";
            position: absolute;
            top: 12px;
            bottom: initial;
            left: 12px;
            width: 15px;
            height: 15px;
            background: #e41cf8;
            box-shadow: 0 0 0 5px #e41cf833,
            0 0 0 10px #e41cf822,
            0 0 0 20px #e41cf811,
            0 0 20px #e41cf8,
            0 0 50px #e41cf8;
        }
         .count .ring:nth-child(4){
            animation: animate 4s linear infinite;
            animation-delay: -4s;
            border-top: 4px solid transparent;
            border-left:4px solid #05d408;
            position: absolute;
            bottom: -66.66px;
        }
        .count .ring:nth-child(4)::before{
            content: "";
            position: absolute;
            top: 12px;
            top: 12px;
            left: 12px;
            width: 15px;
            height: 15px;
            background: #05d408;
            box-shadow: 0 0 0 5px #05d40833,
            0 0 0 10px #05d40822,
            0 0 0 20px #05d40811,
            0 0 20px #05d408,
            0 0 50px #05d408;
        }

How to use / कैसे इस्तेमाल करें:

1. HTML code ko apne body tag ke andar paste karein.
2. CSS code ko <style> tag ke andar ya external CSS file mein save karein.
3. Enjoy your glowing loader!