Connect with us!

Shapeshifting Loader Animation HTML and CSS tutorial for beginners

Salow
February 27, 2022
CSS, Animation

Shapeshifting is the ability to physically transform from one form to another. Using it as a loader in your website.

In this article we will see how to program shapeshifting loader animation using CSS.

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

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Table of Contents

Shapeshifting Loader Code Block

Here is the code for implementing the shapeshifting loader.

.shape-loader {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

Yay! We have created the static shape symbol.

Here is the output:

shapeshifting symbol

Shapeshifting Loader CSS Animation

Pumping animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for 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. This gives more control over the intermediate steps of the animation sequence than transitions.

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 shape-shift {
        33% {
          border-radius: 0;
          background: #83c5be;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        66% {
          border-radius: 0;
          background: #ffa516;
          clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
        }
      }

The following way is to declare the CSS Class inside the class block.

.shape-loader {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: shape-shift 2s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes shape-shift {
        33% {
          border-radius: 0;
          background: #83c5be;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        66% {
          border-radius: 0;
          background: #ffa516;
          clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
        }
      }

Following is the output for shapeshifting animation

Shapeshifting animation

Shapeshifting Loader Video Tutorial

You can find the complete coding tutorial in the following YouTube video.

shapeshifting animation YouTube video

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>
      .shape-loader {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: shape-shift 2s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes shape-shift {
        33% {
          border-radius: 0;
          background: #83c5be;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        66% {
          border-radius: 0;
          background: #ffa516;
          clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Shapeshifting Animation</h1>
    <div class="shape-loader"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Shapeshifting Animation using CSS and HTML. Good luck and happy coding !