Home » CSS Loading Animation Effects, Moving Wave Preloader, Music Wave Preloader, Line Animation

CSS Loading Animation Effects, Moving Wave Preloader, Music Wave Preloader, Line Animation

by admin
Creative CSS Preloader

Hello friends, as you know that according to the current trend, how much use is a preloader and if you look at any website and application like a user, then you will know more about the importance of a loader in any software. I have also uploaded many loading animation video tutorials, you can see them in learndesign youtube channel. I will put below the links to some videos, which you can see by clicking on them.

I have already made videos of this preloader i.e. loading animation and now I am writing an article on it so that you can understand it better. In this article, I am going to tell about three preloaders. In which we will cover everything like moving wave animation, music wave animation, fadein fadeout animation, line animation, and blink animation. There will be no 3rd party js in this, they are going to do it with pure CSS.

Preloader 1: If we talk about the first preloader, then in this you have to create a div with the name of the loader, then create another div inside it with the name of loader_inner and take the h5 tag just below it. After that add the span tag low. I have given its code below.

After that, if we talk about CSS, then I have used keyframes animation in two places, in which first I have done in span, I have added the image of wave in its background, then I have changed the position of background through keyframes animation. And the second animation that I have used is done inside the h5 tag, in this, I have given the animation of fade, in this I have set the opacity to 0 and 1 and its duration is 2 seconds.

Preloader 2: In this loader, I have taken a div named loader and have 5 span tags inside it.

After this, in CSS, I have given animation in span, its duration is 1.5 seconds and it is kept playing continuously i.e. infinite. All the spans are given animation-delay with the help of nth-child, then in keyframes transform scaleY is given to 0 and filter hue-rotate 360deg. I have given its code below.

Preloader 3: Now talking about this loader, you must not have seen this type of loader anywhere. In this, I have taken a div named loader, inside it has taken two divs named line and between these two divs have taken a tag named h4

Talking about its CSS, animation has been used in it before the loader. The duration of this animation is 5 seconds and the default state transform scale is 0 and when the keyframe animation happens, the transform scale will be 1 and it will happen once. After that, the animation of blink is added in the h4 tag, that is, the opacity will change in the keyframe animation and its duration is 0.125 seconds i.e. you will see it blinking. After that, the last animation given is added to the class named line, whose duration is 2 seconds and the delay is given 5 seconds, and in the keyframe animation, the transform scale is given 3 ie, it will zoom 3 times and slowly hide. will go. I have given all these codes below, you can see.

You will get to see many videos like this and you will get to see the articles as well, among them, you will also get to see my videos and articles and if you like them, then definitely like and share them. You can subscribe to the learndesign youtube channel to see more of my videos.

Related Articles

Leave a Comment