Circle Rotate Loading Animation With Particles | Rotating and Pulse Effect

How we can create a rotating circle loader like a movie scene? Solution: See this Circle Rotate Loading Animation With Particles Background, Rotating and Pulse Effect.

Previously I have shared a loader pack with 12 different types of loading animation, but this is a unique one. Basically, a loader or preloader visualizes the loading process when a webpage loading. It is a way to entertain and attract your user while the page is loading, this is the reason why this also known as loading animation. Loaders come with different types of effects and animations some are rectangular, some are circular, and some with just text.

Today you will learn to create a loader with rotating and pulse effect. Basically, there is a circular rotating preloader animation with 3 circles. One circle is big, one is small, and one is smaller. And these circles have only stoke color not fully filled, two sides of circles are not available that create the design more creative. The circles rotating clockwise and anti-clockwise repeatedly, and it rotating opposite direction of each other. Middle of all circles there is a text “Loading” which has pulse effect. Also, there is particle animation in the background of the page.

So, Today I am sharing Circle Rotate Loading Animation With Particles. There I have used HTML and CSS for creating the program and animations, but the particles based on a JavaScript library. If you remove the particle effects, then this is a pure HTML CSS program. This is a cool loading effect, which you can use on your website.

If you are thinking now how this preloader actually is, then see the preview given below.

Preview Of Loader with Rotating and Pulse Effect

See this video preview to getting an idea of how this loader looks like.

Now you can see this animation visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• Responsive Flexbox Modals
• Stairway Hover Navigation
• 3D Progress Bar Animation
• Minimal SVG Analog Clock

Circle Rotate Loading Animation  Source Code

Before sharing source code, let’s talk about it. First  I have created a div with class name ‘preloader’ and placed another div inside it named ‘loader‘ and a span inside these two divs for text “Loading”. After that, I have created 2 more divs for the particle animations. In the HTML file, I have linked external files like CSS, JS, jQuery CDN, Particle.JS CDN.

Now using CSS I have placed all the elements in center, as you can see in the preview. There I have used CSS transform command to rotate the circles. I also used CSS @keyframe command to creating the animations effect like repeatedly rotating circle and pulse effect text. I also gave basic values like size, position, margin, padding, etc to the elements with CSS.

JavaScript file is here only for particle animation, if you don’t want the background effect then simply remove the JS file and related links in the HTML file. There I gave values like speed, density, area, etc which are pre-built command in the library. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Circle Rotate Loading Animation With Particles, Preloader with Rotating and Pulse Effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.