Thunder Animation website loader using HTML and CSS

CSS helps to create many amazing animations that are accustomed to building screen-loading animations for your websites. Thus results in implementing a more interactive and lively UI for the users.

CSS Properties

Below mentioned are some of the important properties we use to create the circle intersect loading screen animation.

1. Left: The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
2. Inset: The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.
3. Box-shadow: The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas.
4. Transform: The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
5. Clip-path: The clip-path CSS property creates a clipping region that sets what part of an element should be shown.
6. Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.
7. Content: The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.
8. Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area.

Thunder Animation Code Block

Here is the code for implementing the Thunder Animation.

.thunder {
        left: 160px;
        width: 65px;
        height: 117px;
        position: relative;
      }
      .thunder:before,
      .thunder:after {
        content: "";
        position: absolute;
        inset: 0;
        background: #ff8001;
        box-shadow: 0 0 0 50px;
        clip-path: polygon(
          100% 0,
          23% 46%,
          46% 44%,
          15% 69%,
          38% 67%,
          0 100%,
          76% 57%,
          53% 58%,
          88% 33%,
          60% 37%
        );
      }

      .thunder:after {
        
        transform: perspective(300px) translateZ(0px);
      }

Yay! We have created the static Thunder Animation.

Here is the output:

Thunder Animation CSS Classes

Below mentioned are the classes we use to create the thunder loading screen animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  pulsing {
        to {
          transform: perspective(300px) translateZ(180px);
          opacity: 0;
        }
      }

Here we see how to declare the CSS Class inside the class block.

 .thunder {
        left: 160px;
        width: 65px;
        height: 117px;
        position: relative;
      }
      .thunder:before,
      .thunder:after {
        content: "";
        position: absolute;
        inset: 0;
        background: #ff8001;
        box-shadow: 0 0 0 50px;
        clip-path: polygon(
          100% 0,
          23% 46%,
          46% 44%,
          15% 69%,
          38% 67%,
          0 100%,
          76% 57%,
          53% 58%,
          88% 33%,
          60% 37%
        );
      }

      .thunder:after {
        animation: pulsing 1s infinite;
        transform: perspective(300px) translateZ(0px);
      }

      @keyframes pulsing {
        to {
          transform: perspective(300px) translateZ(180px);
          opacity: 0;
        }
      }

If you follow all the steps mentioned above you will be able to see the output as shown here.

Thunder Animation Video Tutorial

I am attaching the video link for creating circle intersect animation which I have already posted in my YouTube channel. You can watch it if you are more interested.

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .thunder {
        left: 160px;
        width: 65px;
        height: 117px;
        position: relative;
      }
      .thunder:before,
      .thunder:after {
        content: "";
        position: absolute;
        inset: 0;
        background: #ff8001;
        box-shadow: 0 0 0 50px;
        clip-path: polygon(
          100% 0,
          23% 46%,
          46% 44%,
          15% 69%,
          38% 67%,
          0 100%,
          76% 57%,
          53% 58%,
          88% 33%,
          60% 37%
        );
      }

      .thunder:after {
        animation: pulsing 1s infinite;
        transform: perspective(300px) translateZ(0px);
      }

      @keyframes pulsing {
        to {
          transform: perspective(300px) translateZ(180px);
          opacity: 0;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Thunder Animation</h1>
    <div class="thunder"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Thunder Animation using CSS and HTML. See you in next tutorial!