Leaping Triangles Loader

January 18, 2025

Learn how to create a Leaping Triangles Loader animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality.

Code Snippets

1. HTML (index.html)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leaping Triangles Loader</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        </div>
  </body>
</html>

2. CSS (styles.css)


/:root {
    --c: #ffa500;
  }
  
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #252525, #010101);
  }
  
  
  .loader {
    width: 15vmin;
    height: 15vmin;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%);
    filter: 
      drop-shadow(0.2vmin 0.2vmin 0vmin #bf7200) drop-shadow(0.2vmin 0.2vmin 0vmin #ab6701) 
      drop-shadow(0.2vmin 0.2vmin 0vmin #9c5e01) drop-shadow(0.2vmin 0.2vmin 0vmin #8d5502) 
      drop-shadow(0.4vmin 0.2vmin 0vmin #744602) drop-shadow(0.4vmin 0.2vmin 0vmin #5f3900) 
      drop-shadow(0.4vmin 0.2vmin 0vmin #4d2e00) drop-shadow(0.4vmin 0.2vmin 0vmin #382200) 
      drop-shadow(4vmin 3vmin 1vmin #0008);
  }
  
  .loader span {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: 100% 100%;
    transform: rotate(60deg);
    animation: spin 1.5s ease-in-out -1.245s infinite;
    background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%);
  }
  
  .loader span + span {
    transform-origin: 0% 100%;
  }
  
  .loader span + span + span {
    transform-origin: 50% 14%;
  }
  
  @keyframes spin {
    100% { transform: rotate(300deg); }  
  }

In this tutorial, we'll create a beautiful triangular rotating loader animation using CSS. This loader is built with pure CSS, using gradients, custom properties, and animations to achieve a dynamic and eye-catching effect.

How It Works:

Root Custom Property: The :root pseudo-class is used to define a CSS variable --c for the loader's color (#ffa500), making it easy to change the color globally.
Background Setup: The <body> is styled with a radial gradient to create a dark, soft background that highlights the loader. Flexbox is used to center the loader horizontally and vertically.
Loader Design:
- The .loader container:
  - A circular gradient (conic-gradient) is applied to create the triangular gradient effect.
  - Multiple drop-shadow effects are used to add depth and a glowing effect.
- Three <span> elements inside .loader are positioned at different rotation points (transform-origin) to form a triangular arrangement.
Animation: The @keyframes spin rule defines the spinning animation by rotating the elements 300 degrees. Each <span> is animated with a slight delay to create a dynamic, rotating triangular pattern.

Instructions to Use:

Create two files: One for HTML (e.g., index.html) and one for CSS (e.g., styles.css).
Link them: Make sure the HTML file links to the CSS file using the <link rel="stylesheet" href="styles.css"> tag in the <head> section.
Open the HTML file: Open index.html in a browser to see the bouncing ball animation in action.

Try It Yourself

Copy the code above and paste it into your HTML or CSS editor to experiment with the animation. You can change the bounce height or speed to make it your own!

Demo

Check out the animation in action: View on Instagram