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: HTML Structure
SCSS Setup and Variables
CSS Animation and Keyframes
Understanding Mixins for Reusability
Combining it All Together
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: 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



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>



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.



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! 🎨 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. HTML CSS 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: HTML Structure SCSS Setup and Variables CSS Animation and Keyframes Understanding Mixins for Reusability Combining it All Together Final Implementation HTML Structure HTML Structure SCSS Setup and Variables SCSS Setup and Variables CSS Animation and Keyframes CSS Animation and Keyframes Understanding Mixins for Reusability Understanding Mixins for Reusability Combining it All Together Combining it All Together Final Implementation Final Implementation 1. HTML Structure The HTML structure uses a series of div elements for each slice of the animation. HTML div 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> <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. slice inner 2. SCSS Setup and Variables Using SCSS , we define variables for reusable colors, angles, and animation settings. Variables provide flexibility and improve code maintainability. SCSS $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; $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 @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);
  }
} @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;
  }
} @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;
} @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);
} .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: 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 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> 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. 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. 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 Compile SCSS to CSS: Save your SCSS in a file (e.g., loader.scss ) and compile it using a tool like Dart Sass: loader.scss sass loader.scss loader.css sass loader.scss loader.css 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> Integrate CSS and HTML: Add the compiled CSS directly into the <style> tag or link it as an external file: <style> <style>
  /* Paste compiled CSS here */
</style> <style>
  /* Paste compiled CSS here */
</style> 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. 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. The CSS is properly linked. No keyframes or animation rules are missing. 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. 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. $red duration 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! 🎨

This story contains new, firsthand information uncovered by the writer.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Multilevel Navigation Using Jekyll: A Step-by-Step Guide

38 Stories To Learn About Animation

A Beginner's Guide to JavaScript's The Intersection Observer API

A glowing, crackling fire effect with CSS animations

A Simple Guide for CSS Animations

Multilevel Navigation Using Jekyll: A Step-by-Step Guide

38 Stories To Learn About Animation

A Beginner's Guide to JavaScript's The Intersection Observer API

A glowing, crackling fire effect with CSS animations

A Simple Guide for CSS Animations

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps