Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Glowing Tube Loader using HTML & CSS
    HTML & CSS

    How to make Glowing Tube Loader using HTML & CSS

    Coding StellaBy Coding Stella2 October 2024No Comments3 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Glowing Tube Loader using HTML and CSS. This project will feature a loader animation where a glowing “liquid” fills up a tube, providing a modern and engaging loading indicator.

    We’ll use HTML for the basic structure of the loader and CSS to style the tube and animate the glowing filling effect.

    Let’s get started on building the Glowing Tube Loader. Whether you’re new to web development or have more experience, this project offers a great way to practice CSS animations and create a visually engaging preloader. Let’s bring some glow to our loading screens!

    HTML :

    This code snippet creates a section for a loader that contains five individual sliders. Each <div class="slider"> represents a sliding element, and they are given a custom CSS variable --i to differentiate them. The --i variable allows for unique animations for each slider, making them stagger in their movements based on their index. When combined with the CSS from your previous code, these sliders will animate vertically with a hue-rotation effect, creating a visually appealing loading animation. The loaders are organized within a parent section classed as loader, which centers them on the page.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>CSS Tube Loader - @coding.stella</title>
      <link rel="stylesheet" href="./style.css">
     
    </head>
    <body>
    
      <section class="loader">
        <div class="slider" style="--i:0">
        </div>
        <div class="slider" style="--i:1">
        </div>
        <div class="slider" style="--i:2">
        </div>
        <div class="slider" style="--i:3">
        </div>
        <div class="slider" style="--i:4">
        </div>
      </section>
      
    </body>
    </html>

    CSS :

    This code creates a loader animation. The html and body are centered using flex with a light gray background. The .loader class centers its child elements horizontally. The .slider class defines the look of the sliding elements, giving each a white, cylindrical shape with shadow effects. The ::before pseudo-element creates a circle that moves vertically within the .slider from top to bottom using a keyframe animation called animate_2, which shifts the element’s position and changes its color gradually (with the hue-rotate filter). The animation repeats infinitely.

    html,
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      background-color: #e8e8e8;
    }
    
    .loader {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }
    
    .slider {
      overflow: hidden;
      background-color: white;
      margin: 0 15px;
      height: 80px;
      width: 20px;
      border-radius: 30px;
      box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
        inset -5px -5px 10px rgba(0, 0, 255, 0.1),
        inset 5px 5px 10px rgba(0, 0, 0, 0.1);
      position: relative;
    }
    
    .slider::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      border-radius: 100%;
      box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
        inset 0px 0px 0px rgba(0, 0, 0, 0.1);
      animation: animate_2 2.5s ease-in-out infinite;
      animation-delay: calc(-0.5s * var(--i));
    }
    
    @keyframes animate_2 {
      0% {
        transform: translateY(250px);
        filter: hue-rotate(0deg);
      }
    
      50% {
        transform: translateY(0);
      }
    
      100% {
        transform: translateY(250px);
        filter: hue-rotate(180deg);
      }
    }
    

    In conclusion, creating a Glowing Tube Loader using HTML and CSS has been an exciting and creative project. By combining HTML for structure and CSS for styling and animations, we’ve designed a modern loader that visually represents progress in a glowing and interactive way.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    loader
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Slide-out Navigation with GSAP 3 using HTML CSS & JavaScript
    Next Article How to make Step Indicator – Timeline using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025
    HTML & CSS

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    HTML & CSS

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make 3D wave animation using HTML & CSS

    10 May 2024

    How to make Smooth Parallax Scrolling Cards using HTML CSS & JavaScript

    14 May 2024

    How to make Step Indicator – Timeline using HTML CSS & JavaScript

    7 October 2024

    How to make Valentine’s Day Card using HTML & CSS

    13 February 2024
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood