Close Menu

    Subscribe to Updates

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

    What's Hot

    How to create Animated Social Media Card Hover using HTML CSS and JS

    20 October 2025

    How to create Animated LogOut Button using HTML CSS and JS

    18 October 2025

    How to create Animated Firework Diwali using HTML CSS and JS

    16 October 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 Cool Loading Animation using HTML & CSS
    HTML & CSS

    How to make Cool Loading Animation using HTML & CSS

    Coding StellaBy Coding Stella18 April 2025No Comments3 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Cool Loading Animation using HTML and CSS. This eye-catching animation is perfect for keeping users engaged while your content loads. It’s smooth, stylish, and easy to add to any website.

    We’ll use:

    • HTML to create the structure of the loader.
    • CSS to add animations, colors, and smooth motion effects.

    This project is great for beginners to practice CSS animations and for developers who want to make their websites look more polished and interactive. Let’s get started and make loading screens more fun! ⏳✨

    HTML :

    This HTML code displays a creative animated SVG loader with a circular ring and a colorful worm-like path that moves in a unique pattern, giving a visually engaging loading effect using gradients and SVG animations.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Loading Goes Off Track | @coding.stella</title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    
    <svg class="pl" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg">
    	<defs>
    		<linearGradient id="pl-grad" x1="0" y1="0" x2="0" y2="1">
    			<stop offset="0%" stop-color="hsl(193,90%,55%)" />
    			<stop offset="100%" stop-color="hsl(223,90%,55%)" />
    		</linearGradient>
    	</defs>
    	<circle class="pl__ring" r="56" cx="64" cy="64" fill="none" stroke="hsla(0,10%,10%,0.1)" stroke-width="16" stroke-linecap="round" />
    	<path class="pl__worm" d="M92,15.492S78.194,4.967,66.743,16.887c-17.231,17.938-28.26,96.974-28.26,96.974L119.85,59.892l-99-31.588,57.528,89.832L97.8,19.349,13.636,88.51l89.012,16.015S81.908,38.332,66.1,22.337C50.114,6.156,36,15.492,36,15.492a56,56,0,1,0,56,0Z" fill="none" stroke="url(#pl-grad)" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="44 1111" stroke-dashoffset="10" />
    </svg>
      
    </body>
    </html>

    CSS :

    This CSS styles and animates a responsive SVG loader with a wavy “worm” effect. It sets up a light/dark theme, centers the loader on the screen, and animates the ring with subtle bumps while the worm path moves smoothly using custom keyframes and gradients, creating a modern and engaging loading animation.

    * {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    :root {
      --hue: 223;
      --bg: hsl(var(--hue), 10%, 90%);
      --fg: hsl(var(--hue), 10%, 10%);
      font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
    }
    body {
      background-color: var(--bg);
      color: var(--fg);
      font: 1em/1.5 sans-serif;
      height: 100vh;
      display: grid;
      place-items: center;
      transition: background-color 0.3s;
    }
    main {
      padding: 1.5em 0;
    }
    
    .pl,
    .pl__worm {
      animation-duration: 3s;
      animation-iteration-count: infinite;
    }
    .pl {
      animation-name: bump;
      animation-timing-function: linear;
      width: 8em;
      height: 8em;
    }
    .pl__ring {
      stroke: hsla(var(--hue), 10%, 10%, 0.1);
      transition: stroke 0.3s;
    }
    .pl__worm {
      animation-name: worm;
      animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
    }
    
    /* Dark theme */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: hsl(var(--hue), 10%, 10%);
        --fg: hsl(var(--hue), 10%, 90%);
      }
      .pl__ring {
        stroke: hsla(var(--hue), 10%, 90%, 0.1);
      }
    }
    
    /* Animations */
    @keyframes bump {
      from,
      42%,
      46%,
      51%,
      55%,
      59%,
      63%,
      67%,
      71%,
      74%,
      78%,
      81%,
      85%,
      88%,
      92%,
      to {
        transform: translate(0, 0);
      }
      44% {
        transform: translate(1.33%, 6.75%);
      }
      53% {
        transform: translate(-16.67%, -0.54%);
      }
      61% {
        transform: translate(3.66%, -2.46%);
      }
      69% {
        transform: translate(-0.59%, 15.27%);
      }
      76% {
        transform: translate(-1.92%, -4.68%);
      }
      83% {
        transform: translate(9.38%, 0.96%);
      }
      90% {
        transform: translate(-4.55%, 1.98%);
      }
    }
    @keyframes worm {
      from {
        stroke-dashoffset: 10;
      }
      25% {
        stroke-dashoffset: 295;
      }
      to {
        stroke-dashoffset: 1165;
      }
    }
    

    In conclusion, creating a Cool Loading Animation with HTML and CSS is a fun way to enhance your website’s user experience. It’s simple to build and adds a touch of style while content is loading. Keep experimenting with shapes, colors, and motion to create unique loaders! 🚀

    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 loading preloader preloader for website
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to create Hide/Show Password using JavaScript
    Next Article How to create Animated File Upload Modal using JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Animated Electric Card using HTML & CSS

    4 October 2025
    HTML & CSS

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025
    HTML & CSS

    How to make Animated Chair Product Page using HTML & CSS

    30 September 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202429K Views

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

    11 January 202426K Views

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

    14 February 202421K Views

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

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

    How to Make Analog clock using HTML CSS & JavaScript

    13 December 2023

    How to make Cool Button hover effect using HTML & CSS

    31 August 2024

    How to make Awesome Search Bar using HTML & CSS

    14 January 2024

    How to create Animated Tesla Landing Page using HTML CSS and JS

    29 August 2025
    Latest Post

    How to create Animated Social Media Card Hover using HTML CSS and JS

    20 October 2025

    How to create Animated LogOut Button using HTML CSS and JS

    18 October 2025

    How to create Animated Firework Diwali using HTML CSS and JS

    16 October 2025

    How to create Escape Road Game using HTML CSS and JS

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