Close Menu

    Subscribe to Updates

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

    What's Hot

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 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 Ball Leaping Loader using HTML & CSS
    HTML & CSS

    How to make Ball Leaping Loader using HTML & CSS

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

    Let’s create a Ball Leaping Loader using just HTML and CSS. This project is perfect for beginners and will teach you some cool animation techniques.

    We’ll keep it simple and stylish, using HTML for the structure and CSS for the animation. No need for complicated coding – just some basic HTML and CSS skills!

    Let’s dive into building this Ball Leaping Loader. Whether you’re new to coding or looking to expand your skills, this project is a fun way to learn animation. Let’s get started and make your webpage more dynamic!

    HTML :

    This HTML code sets up the structure of a webpage. It includes a title, a link to an external stylesheet (style.css), and a JavaScript file (script.js). Inside the body, there is a div element with the class “loader” containing nine div elements with the class “dot”. These dots represent the animated loading animation defined in the CSS file.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Ball Leaping Loader</title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="loader">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    	<div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- partial -->
      <script  src="./script.js"></script>
    
    </body>
    </html>

    CSS :

    This code is for creating a loading animation with bouncing dots. It imports a font from Google Fonts, sets up the layout of the webpage, and defines the styles for the loading animation. The animation is created using CSS keyframes to make the dots bounce up and down in a loop. Each dot has a different color and delay to create a visually appealing effect.

    @import url(https://fonts.googleapis.com/css?family=Montserrat);
    body {
      height: 100vh;
      padding: 2rem;
      display: grid;
      place-items: center;
      text-align: center;
      background-color: #f3f8ff;
    }
    
    .loader {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100px;
      height: 50px;
      margin: 0 auto;
    }
    
    .dot {
      position: relative;
      display: inline-block;
      padding: 25px;
      height: 157px;
      width: 50px;
    }
    .dot:before {
      position: absolute;
      content: "";
      display: block;
      top: 0;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ae17fb;
      transform-origin: 50%;
      animation: bounce 0.5s alternate infinite ease;
      /* you can try experimenting with the duration and animation-iteration-count here */
    }
    
    .dot:nth-child(1):before {
      background-color: #e26ee5;
      animation-delay: 0s;
    }
    
    .dot:nth-child(2):before {
      background-color: #7e30e1;
      animation-delay: -0.8s;
    }
    
    .dot:nth-child(3):before {
      background-color: #49108b;
      animation-delay: -1.6s;
    }
    
    .dot:nth-child(4):before {
      background-color: #e26ee5;
      animation-delay: -2.4s;
    }
    
    .dot:nth-child(5):before {
      background-color: #7e30e1;
      animation-delay: -3.2s;
    }
    
    .dot:nth-child(6):before {
      background-color: #49108b;
      animation-delay: -4s;
    }
    
    .dot:nth-child(7):before {
      background-color: #e26ee5;
      animation-delay: -4.8s;
    }
    
    .dot:nth-child(8):before {
      background-color: #7e30e1;
      animation-delay: -5.6s;
    }
    
    .dot:nth-child(9):before {
      background-color: #49108b;
      animation-delay: -6.4s;
    }
    
    @keyframes bounce {
      0% {
        top: 150px;
        height: 5px;
        border-radius: 60px 60px 20px 20px;
        transform: scaleX(2);
      }
      35% {
        height: 50px;
        border-radius: 50%;
        transform: scaleX(1);
      }
      100% {
        top: 0;
      }
    }

    Creating a Ball Leaping Loader with HTML and CSS is a great way to learn animation. It’s simple, enjoyable, and perfect for beginners. Let’s embrace creativity and have fun coding!

    Facing any problems in your project ? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!

    Animation loader loading
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Responsive Accordion Menu using HTML & CSS
    Next Article How to make Custom File Upload Button in HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025
    HTML & CSS

    How to create Solar System Explorer using HTML and CSS

    31 July 2025
    HTML & CSS

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202421K Views

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

    11 January 202420K Views

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

    14 February 202418K Views

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

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

    How to make Scroll-driven Animations using HTML & CSS

    9 September 2024

    How to make a Sticky Navigation Bar using HTML, CSS, And JavaScript

    12 January 2024

    How to make Flip A Coin using HTML CSS & JavaScript

    11 April 2024

    How to make Glassmorphism Login Form with Various Theme in HTML CSS & JavaScript

    12 January 2024
    Latest Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 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