Radar Loading Animation With HTML & CSS

Hey Programmers! Do you want to create eye-catching Radar Loading Animation for your web application? In this blog post, we are going to build a cool radar-loading animation using pure HTML & CSS.

This radar loading animation will clone the sweeping motion of a radar & provide a visually appealing way to indicate loading or processing. At the end of this post, you will be able to use CSS Animation, Pseudo-Elements & Blur Effects more efficiently.

Also Read: How To Make Book Loading Animation With HTML & CSS

We will understand the code step by step & At the end of this post, I will share the entire source code of this project so that you can run this on your local device,

Concepts Used To Make Radar Loading Animation

1. CSS Blur Effect
2. CSS Box Shadow & Box Model
3. CSS Before & After
4. CSS ANimation & KeyFrames
5. CSS Border Radius
6. CSS Inset, Overflow

Understanding HTML To Make Radar Loading Animation

1. Loader Container:

• There’s a div element with the class loader. This serves as the container for the loader.

   <div class="loader">

2. Span Element:

• Inside the loader container, there’s a span element. This is where the rotating radar animation will be displayed.

   <span></span>

Understanding CSS To Make Radar Loading Animation

1. Loader Container Styles:

• The .loader class defines the appearance of the loader container.

   .loader {
     position: relative;
     width: 150px;
     height: 150px;
     background: transparent;
     border-radius: 50%;
     box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
     border: 1px solid #333;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
   }

• It sets the position to relative, defines the width and height, creates a border radius to make it circular, adds a box shadow for a 3D effect, and centers the content using a flexbox.

1. Loader Pseudo-elements:

• The ::before and ::after pseudo-elements are used to create additional decorative elements within the loader.

   .loader::before {
     content: '';
     position: absolute;
     inset: 20px;
     background: transparent;
     border: 1px dashed#444;
     border-radius: 50%;
     box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
                 inset 5px 5px 35px rgba(0,0,0,0.25);
   }

   .loader::after {
     content: '';
     position: absolute;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 1px dashed#444;
     box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
                 inset 5px 5px 35px rgba(0,0,0,0.25);
   }

• These elements have dashed borders and box shadows to enhance the visual appeal of the loader.

1. Span Element Styles:

• The .loader span selector styles the span element within the loader container.

   .loader span {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 50%;
     height: 100%;
     background: transparent;
     transform-origin: top left;
     animation: radar81 2s linear infinite;
     border-top: 1px dashed #fff;
   }

• It positions the span element in the center of the loader container and sets its width to 50% of the container’s width.

1. Span Element Before Pseudo-element:

• The ::before pseudo-element of the span is used to create a visual effect resembling a radar.

   .loader span::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: seagreen;
     transform-origin: top left;
     transform: rotate(-55deg);
     filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
   }

• It creates a green radar-like shape with blur and drop-shadow effects to give it a glowing appearance.

1. Keyframe Animation:

• The @keyframes rule defines the radar81 animation, which rotates the radar span element.

   @keyframes radar81 {
     0% {
       transform: rotate(0deg);
     }

     100% {
       transform: rotate(360deg);
     }
   }

• It starts the rotation from 0 degrees and ends at 360 degrees, creating a full rotation effect.

Source Code Of Radar Loading Animation

HTML:

 <div class="loader">
        <span></span>
</div>

CSS:

<style>
        .loader {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px dashed#444;
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed#444;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 2s linear infinite;
  border-top: 1px dashed #fff;
}

.loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: seagreen;
  transform-origin: top left;
  transform: rotate(-55deg);
  filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
}

@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
    </style>

About Author