Liquid Loader Spinner Animation with SVG filters & CSS transforms HTML5 CSS3 Tutorial for Beginners

In this CSS3 tutorial for beginners we will learn basics of keyframes and build a liquid loader spinner animation with SVG filters & CSS transforms using just HTML5 and CSS3

For more creative CSS animation tutorials for beginners as well as advanced HTML & CSS guides, hover animation and transition examples from scratch with pure vanilla CSS, new experimental animations on buttons, menus, forms and other web elements, CSS animation examples, creative ideas for web design, advanced CSS selectors and the best CSS tricks of 2019, check out my CSS3 & HTML5 playlist:

I also have pure vanilla JavaScript animation series, in each tutorial we create all different kinds of interactive animated effects from scratch. No plugins, no libraries, no frameworks. Every line of code is explained to give you hands on experience and teach you as much JavaScript as possible. If you want more creative JavaScript tutorials, HTML canvas animations, interactive animated effects, code alongs, video guides for beginners as well as advanced pure vanilla JavaScript, check out the playlist here:

If you liked this advanced CSS3 tutorial I'm sure you will enjoy other videos on my channel. You can find HTML Canvas Animation Tutorials, JavaScript tutorials, animated effects and step by step animation guides, each video shows many examples of the final effect. I will help you learn modern web development techniques by building real projects you can show off on your personal website or GitHub. Code along with me and gain skills to get your first job in the industry. If I could do it you can do it too. If you decide to code along and modify the effects, share your Codepen/JS Fiddle in the comments, I want to see what you came up with.

My name is Frank, I'm a self-taught Front End Web Developer. I learned everything I know in my free time and I used the knowledge to get a great job in web development industry. The part I enjoy the most is building creative animations and interactive effects for the web using HTML, CSS and JavaScript. Thank you for watching my video.

For more creative vanilla JavaScript tutorials, CSS tricks, HTML canvas animations, front end web development and web design guides, subscribe to the channel and click the bell icon to get notified when I release a new animation tutorial.

#css3 #html5 #frankslaboratory

Music:

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commision without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

[cshaiku]

Master class in advanced CSS use! Great job!

[Amar]

One of the most amazing CSS video I found today.

Once I wake up I will write this code and mess with it.
Thanks for the video, learned a lot!

[nethajimythesewaran]

Amazing work frank I like the liquid effect done in filter blur ad contrast not using the SVG in HTML simply your are master thanks

[anatudor]

There are two things that stood out to me the most.


Instead of:


.particle:nth-child(1),
.particle:nth-child(3),
.particle:nth-child(5),
.particle:nth-child(7),
.particle:nth-child(9) { /* animation */ }


you can write:


.particle:nth-child(odd) { /* animation */ }


Instead of:


@keyframes leftSpin {
from {
transform: rotate(0deg) translateX(50px);
}
to {
transform: rotate(360deg) translateX(50px);
}
}

@keyframes rightSpin {
from {
transform: rotate(360deg) translateX(50px);
}
to {
transform: rotate(0deg) translateX(50px);
}
}


.leftSpin {
animation: leftSpin 2.4s linear infinite;
}

.rightSpin {
animation: rightSpin 2s linear infinite;
}


you can write:


@keyframes spin { to { transform: rotate(1turn) translate(50px) } }


.particle:nth-child(2n) {
transform: rotate(0deg) translate(50px);
animation: spin 2.4s linear infinite
}


.rightSpin {
animation-direction: reverse;
animation-duration: 2s
}

[kirankumaruppuganti]

Thanks alot. You saved my time alot. Waiting to create something like this

[darshanag]

Plzz continue this wonderful work. Its just so helpful and beautiful.

[benpiatrik]

4:20 I'm sure you can write translate and rotate properties on one line, it worked for me in a previous project

[stevepaul]

really great videos, thank you! could you talk a little about your editor/settings? I see some nice autocompletes I don't have ;)

[alessiopustorino]

Beautiful. I want to ask a question. How do you calculate the animation-delay of each element?

[brandonsayring]

Frank: *writes 81 lines of css*
Frank: "we did that with just a few lines of css"

[webanimationjavascriptsvg]

I repeated the code and everything turned out except the liquid effect.
Accordingly, the question is on this line, after which the flowing effect appeared in your video:
filter: blur(10px) contrast(15);
blur works, but contrast with this value does not change anything.
contrast is set in the range from 0 to 1, if it is not percent of course. Do you have 15?
Tell me what's the catch?