HomeCSSAnimationRainbow Animation With CSS

Rainbow Animation With CSS

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will create a rainbow animation. To build this animation, we need HTML and CSS. You can use this animation as a loader/spinner.
 
If you are looking for more such tutorials to improve your CSS skills, you can check out this playlist here. This playlist consists of a bunch of animations created with Pure CSS.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel, where I post new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before we start coding, let us create the project folder structure. We start by creating a project folder called – ‘Rainbow Animation’. Inside this folder, we have two files. The first file is index.html which is the HTML document. And the second file is style.css which is the stylesheet.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document. HTML creates the elements necessary to create the structure and layout of our project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rainbow Animation</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="rainbow-color rainbow-color-1"></div>
      <div class="rainbow-color rainbow-color-2"></div>
      <div class="rainbow-color rainbow-color-3"></div>
      <div class="rainbow-color rainbow-color-4"></div>
      <div class="rainbow-color rainbow-color-5"></div>
    </div>
  </body>
</html>

CSS:

Next, we create the rainbow shape and add animation to these shapes using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #8eb0ff;
}
.container {
  height: 34em;
  width: 34em;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.6em;
  box-shadow: 0 1.5em 3.5em rgba(32, 47, 80, 0.2);
}
.container:after {
  content: "";
  position: absolute;
  height: 50.5%;
  width: 100%;
  background-color: #ffffff;
  bottom: 0;
  border-radius: 0 0 0.6em 0.6em;
}
.rainbow-color {
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  animation: spin 5s infinite;
  transform-origin: 50% 0;
}
@keyframes spin {
  30% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  55% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  85% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.rainbow-color-1 {
  height: 11.25em;
  width: 22.5em;
  border: 1.25em solid #fd004c;
  border-top: none;
  top: calc(50% + 5.62em);
  border-radius: 0 0 11.25em 11.25em;
  animation-delay: 0.8s;
}
.rainbow-color-2 {
  height: 10em;
  width: 20em;
  border: 1.25em solid #fe9000;
  border-top: none;
  top: calc(50% + 5em);
  border-radius: 0 0 10em 10em;
  animation-delay: 0.6s;
}
.rainbow-color-3 {
  height: 8.75em;
  width: 17.5em;
  border: 1.25em solid #fff020;
  border-top: none;
  top: calc(50% + 4.37em);
  border-radius: 0 0 8.75em 8.75em;
  animation-delay: 0.4s;
}
.rainbow-color-4 {
  height: 7.5em;
  width: 15em;
  border: 1.25em solid #3edf4b;
  border-top: none;
  top: calc(50% + 3.75em);
  border-radius: 0 0 7.5em 7.5em;
  animation-delay: 0.2s;
}
.rainbow-color-5 {
  height: 6.25em;
  width: 12.5em;
  border: 1.25em solid #3363ff;
  border-top: none;
  top: calc(50% + 3.12em);
  border-radius: 0 0 6.25em 6.25em;
}
@media screen and (max-width: 550px) {
  body {
    font-size: 12px;
  }
}

Your rainbow animation is now ready. You can now go ahead and customize it the way you like by experimenting with colours, animation duration, animation delay etc.

If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so don’t forget to drop your queries, suggestions or feedback below.
Happy Coding!

Previous articleMCQ – 4/8/22
Next articleMCQ – 6/8/22
RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

thirteen − 6 =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art