Creating a Loading Status or Building Process Animation using Vanilla CSS
Tags: html, css, javascript, animation
Published: 2021-04-14 07:38:42

In this article we will go through step by step to create Loading Status or Building Process animation using Vanilla CSS.

*If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.*

## Step 1: Setting up background theme

We wil use `em`instead of `px` in css so we can change the size of the animation by change the `font-size` in the html.

``` html
	<div id="building" style="font-size:12px">
		<div id="blocks">
		</div>
		<div class="caption">
		</div>
	</div>
```

``` css
	body {
	  background: #050115;
	  color: #d5fff7;
	  font-family: Arial;
	  overflow: hidden;
	}
```

## Step 2: Setting up space for blocks and caption

This will get our animation and caption to be at the center of the page, where caption is on the right side of the animation.

````css
	#building {
	  display: flex;
	  width: 35em;
	  height: 100vh;
	  margin: auto;
	}
	#blocks {
	  margin: auto;
	}
	#caption {
	  padding-left: 0.5em;
	  margin: auto;
	  font-size: 2.5em;
	}
```

## Step 3: Adding the blocks

Since we are going to have 4 identical blocks we give them a commom class as `b` and for adjustment we provide them unique ids as `b1`, `b2`, `b3` and `b4`.


``` html
		<div id="blocks">
			<div class="b" id="b1"></div>
			<div class="b" id="b2"></div>
			<div class="b" id="b3"></div>
			<div class="b" id="b4"></div>
		</div>
```

```css
	.b {
	  background: #d5fff7;
	  border: 0.3em solid #89f2f2;
	  width: 4.5em;
	  height: 4.5em;
	  border-radius: 0.5em;
	  margin: 1em;
	  position: relative;
	}
```

Now we have our four boxes. Next we will position them.

## Step 4: Positioning the boxes

We will position `b2`, `b3` and `b4` relative to `b1`

````css
	#b2 {
	  margin-left: 7.25em;
	}
	#b3 {
	  margin-top: -6em;
	}
	#b4 {
	  margin-left: 7.25em;
	}
```

## Step 5: Animating the blocks
 
We have four blocks so we need to provide them unique animation name and animate them differently. But they will have same `animation-duration`, `animation-iteration-count` and `animation-timing-function`. So we do as below.
 
 ```css
	.b{
	...
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}
	#b1 {
		animation-name: b1;
	}
	#b2 {
	  ...
		animation-name: b2;	
	}
	#b3 {
	  ...
		animation-name: b3;
	}
	#b4 {
	  ...
		animation-name: b4;
	}
	@keyframes b1 {
	  0% {
		left: 0em;
		transform: rotate(0deg);
	  }
	  50% {
		left: 6.25em;
		bottom: 0em;
		transform: rotate(90deg);
	  }
	  100% {
		left: 6.25em;
		bottom: -6.125em;
		transform: rotate(90deg);
	  }
	}
	@keyframes b2 {
	  50% {
		bottom: 0em;
	  }
	  100% {
		bottom: -6.125em;
	  }
	}
	@keyframes b3 {
	  50% {
		top: 0em;
	  }
	  100% {
		top: -6.125em;
	  }
	}
	@keyframes b4 {
	  0% {
		left: 0em;
		transform: rotate(0deg);
	  }
	  50% {
		left: -6.25em;
		top: 0em;
		transform: rotate(90deg);
	  }
	  100% {
		left: -6.25em;
		top: -6.125em;
		transform: rotate(90deg);
	  }
	}
```

## Step 6: Adding Caption and adjusting for small screen


Here you can do something different may be position the caption below the animation, but I prefer it hidden in small-screens.


````html
	<div id="caption">
		Your product is almost ready...
	</div>
```

```css
	@media (max-width: 400px) {
	  #building {
		width: 100%;
	  }
	  #caption {
		display: none;
	  }
	}
```

Thankyou for reading. You can subscribe to following links for more updates.
Social Media Links: https://designingcoder.github.io

{% youtube MdXCnTD6Kso %}