Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create 2 Easy loading animations. To build this project we would need HTML and CSS. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Easy loading animations’. Inside this folder, we have a folder for each loader containing two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. We simply need a div with the class ‘loader’ for creating our loader.
CSS:
Next, we provide styling using CSS.Â
The first loader is simply a circle loader. For this first provide a background color to our body. Provide height, width, alignment, and border to our loader. Since we need a circle we set the ‘border-radius’ to 50%. Now change one part of the border so that we could animate it next. Finally provide a spinning animation by setting 360-degree rotation to the ‘transform’ property.
The second loader is a bit complex. For this, we need three squares which would be combined and separated using animation. So we will use the ‘before’ and ‘after’ pseudo-elements along with the loader div. All the squares would have the same alignment for creating the combined square. For the separation part use the same time for animation but a different rotation value for each of them. In our case, the first square rotates 360 degrees, the second rotates 30 degrees and the last one rotates 60 degrees.
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
Â
