In this article you will learn how to create Circle Animation CSS. Here I will share with you the tutorial of making Circle Animation using html and css.

Circle Animation CSS & HTML (Step by Step)

In this article you will learn how to create Circle Animation CSS. Here I will share with you the tutorial of making Circle Animation using html and css.

In this article you will learn how to create Circle Animation CSS. Here I will share with you the tutorial of making Circle Animation using html and css.

Circle animations in CSS can add a touch of elegance, interactivity, and creativity to your web projects. Whether you want to draw attention to specific elements, create loading spinners, or simply add visual appeal, circle animations can be a valuable tool in your web development toolkit.

Circle Animation CSS

Circular animations CSS are aesthetically pleasing and can enhance the overall design of your website or web application. They can create a sense of motion and flow that engages users.

Let’s start with a simple example of creating a basic circular animation using CSS. We’ll create a spinning circle:

See the Pen Fiery Claws by Ground Tutorial (@groundtutorial) on CodePen.

I used html and css to create this Circle Animation CSS. But I have used those html and css in the format of Haml and SCSS. I have explained those codes very well. So you will not have any difficulty in understanding.

CSS Circle Animation HTML Code

I created the basic structure of circle animation using Haml codes below. Haml is a concise and indentation-based markup language often used for generating HTML. It appears to be a loop structure that generates a nested structure of elements.

				
					-10.times do
  .circles
    .circle
      -30.times do
        .claw

This Haml code generates a structure of Circle Animation CSS with nested HTML elements as follows:

  • - 10.times do: This is a loop in Haml that will generate the following structure 10 times. It’s not directly related to HTML generation; it’s a loop control statement.
  • .circles: This is an HTML element with a class attribute set to “circles.” It will be indented under each iteration of the outer loop, meaning you’ll get 10 of these.
  • .circle: This is another HTML element with a class attribute set to “circle.” It will be indented under each “.circles” element, resulting in 10 “.circle” elements within each “.circles” element.
  • - 30.times do: This is a nested loop within the previous loop. It means that the following block of code will be executed 30 times for each iteration of the middle loop.
  • .claw: This is an HTML element with a class attribute set to “claw.” It will be indented under each “.circle” element and will be generated 30 times for each “.circle.”

So, in summary, this Haml code generates a structure with nested HTML elements as follows:

  • 10 “.circles” div elements, each containing:
  • 10 “.circle” div elements, each containing:
  • 30 “.claw” div elements

Circle Animation CSS Code

Now we need to use the necessary CSS code for CSS Circle Animation. All css of this Circle Animation CSS are well explained.

				
					$speed: 1.35s;
$circle-count: 10;
$claw-count: 30;

These lines define variables using Sass syntax. $speed represents the duration of the animation, $circle-count is the number of circles to be created, and $claw-count is the number of claws.

				
					
html,body{
  width: 100%;height: 100%;
}
body{
  background-color: #140032;
  overflow: hidden;
  margin: 0;
  *{
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  }
}

These lines set the width and height of the HTML and body elements to 100%, ensuring that they take up the entire viewport.

				
					
.circles{
	.circle{
		animation: Claws $speed linear infinite;
	}
	@for $i from 1 through $circle-count{
		&:nth-child(#{$i}){
			transform: rotate($i * 360deg / $circle-count) translate(150px);
		}
	}

  • Here, the code styles the .circles element and its child .circle elements. Each .circle element is given an animation called Claws with the specified speed, making them rotate infinitely in a linear fashion.

  • The @for loop generates the positioning for each circle based on the total number of circles ($circle-count). It calculates the rotation angle to evenly distribute them in a circle using the transform property. The translate function moves them outward from the center.

				
					
	.claw{
		width: 300px;height: 150px;
		border-right: 5px solid;
    border-radius: 20%;
		@for $i from 1 through $claw-count{
			&:nth-child(#{$i}){
				border-color: hsla($i * 50 / $claw-count,100%,50%,1);
				transform: scale($i * 1 / $claw-count) rotate($i * 360deg / $claw-count) translate(-300px);
			}
		}
	}
}

  • Inside the .circles element, there’s a nested .claw element. This code styles these claws. Each claw has a set width, height, border style, and a border-radius that gives it a rounded appearance.

  • A @for loop is used again to style each individual claw based on the total number of claws ($claw-count). It calculates the border color, scales each claw, and rotates them to create a radial pattern. The translate function moves them away from the center.

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

Finally, the code defines a keyframes animation called Claws. This animation rotates the entire set of circles and claws 360 degrees, creating the spinning effect.

When you put all these parts together and apply this code to your HTML, you’ll see a mesmerizing animation of rotating circles with colorful claws emanating from them. Each circle and claw is positioned precisely, creating a visually appealing and dynamic effect.

Hope you liked this Circle Animation CSS tutorial. Comment how you like this simple CSS Circle Animation design.

Earlier I have shared many more types of circle animation designs. You can see those designs if you want. You can use below download button to download all code of this Circle Animation CSS.

Source Code
Tags: ,