How to Create a Dynamic Yelp-Inspired Loader Animation with HTML and CSS

Creating an engaging and visually appealing loader animation can significantly enhance the user experience. In this guide, we’ll explore how to replicate the dynamic loader animation inspired by Yelp's logo using HTML and CSS. The primary focus will be on understanding the structure and animation principles that drive this design.

Overview

The loader animation consists of five animated slices that resemble Yelp’s logo. These slices rotate, scale, and change colors dynamically to create a mesmerizing effect. Here’s how we’ll break down the process:

1. HTML Structure
2. SCSS Setup and Variables
3. CSS Animation and Keyframes
4. Understanding Mixins for Reusability
5. Combining it All Together
6. Final Implementation

1. HTML Structure

The HTML structure uses a series of div elements for each slice of the animation.

Here’s the code:

<div class="yelp-logo">
  <span class="slice slice1">
    <span class="slice-inner"></span>
  </span>
  <span class="slice slice2">
    <span class="slice-inner"></span>
  </span>
  <span class="slice slice3">
    <span class="slice-inner"></span>
  </span>
  <span class="slice slice4">
    <span class="slice-inner"></span>
  </span>
  <span class="slice slice5">
    <span class="slice-inner"></span>
  </span>
</div>

Each slice represents one piece of the animation and has an inner part for additional styling.

2. SCSS Setup and Variables

Using SCSS, we define variables for reusable colors, angles, and animation settings. Variables provide flexibility and improve code maintainability.

$red: #c41200;    // Yelp red color
$grey: white;     // Grey color for contrast
$angle1: 250deg;  // Initial angles for animation
$angle2: 320deg;
$angle3: 30deg;
$angle4: 100deg;
$angle5: 170deg;

These variables control the appearance and rotation angles of the slices.

3. CSS Animation and Keyframes

The animation relies on keyframes to achieve rotation, scaling, and color transitions. Below is a sample of the keyframes for the first slice:

@keyframes animate1 {
  0% {
    background: $grey;
    transform: scale(1.0) rotate($angle1);
  }
  15%, 85% {
    background: $red;
    transform: scale(1.3) rotate($angle1);
  }
  100% {
    background: $grey;
    transform: scale(1.0) rotate($angle1);
  }
}

Each slice has a slightly different animation, creating a staggered effect.

4. Understanding Mixins for Reusability

We use SCSS mixins to encapsulate reusable code for slice structure and animation:

Structure Mixin

Defines the dimensions, color, and animation properties of each slice:

@mixin structure($width, $color, $animation, $duration, $delay) {
  background: $color;
  width: $width;
  height: $width / 3;
  position: relative;

  &:before, &:after {
    transform-origin: 0 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: $red;
    animation: $animation $duration infinite;
    animation-delay: $delay;
  }
}

Animation Mixin

Controls rotation, scaling, and animation origin:

@mixin animation($angle, $duration, $animation, $delay) {
  animation: $animation $duration infinite;
  transform-origin: 0 0;
  transform: scale(1.0) rotate($angle);
  animation-delay: $delay;
}

5. Combining it All Together

Using the mixins, we style each slice with unique properties:

.slice1 {
  @include structure(50px, $red, color-animate1, 900ms, 0);
  @include animation($angle1, 900ms, animate1, 0);
}

.slice2 {
  @include structure(30px, $red, color-animate2, 900ms, 100ms);
  @include animation($angle2, 900ms, animate2, 100ms);
}

.slice3 {
  @include structure(30px, $red, color-animate3, 900ms, 200ms);
  @include animation($angle3, 900ms, animate3, 200ms);
}

.slice4 {
  @include structure(30px, $red, color-animate4, 900ms, 300ms);
  @include animation($angle4, 900ms, animate4, 300ms);
}

.slice5 {
  @include structure(30px, $red, color-animate5, 900ms, 400ms);
  @include animation($angle5, 900ms, animate5, 400ms);
}

Each slice has a unique delay to create a cascading animation effect.

6. Final Implementation

Here’s how to bring everything together:

1. Compile SCSS to CSS: Save your SCSS in a file (e.g., loader.scss) and compile it using a tool like Dart Sass:

   sass loader.scss loader.css
   

2. Integrate CSS and HTML: Add the compiled CSS directly into the <style> tag or link it as an external file:

   <style>
     /* Paste compiled CSS here */
   </style>
   

3. Test the Animation: Open the HTML file in your browser. The animation should run automatically. If not, ensure:

   • The CSS is properly linked.
   • No keyframes or animation rules are missing.

4. Customize: Adjust colors, animation speeds, or sizes in the SCSS to suit your needs. For example, tweak the $red variable or animation duration for slower effects.

   
   

That’s it! Your Yelp-inspired loader is ready to use and adapt for your projects.

Conclusion

This guide walks you through creating a custom loader animation inspired by Yelp's logo. By understanding the structure, SCSS mixins, and animations, you can extend this concept to build more complex and engaging loaders for your projects. Experiment with different colors, rotation angles, and animation durations to create your unique design. Don't forget to test your animations across different browsers for compatibility. Happy coding! 🎨