Simple Spining Preloader in HTML using CSS | Make Preloader in html quickly [2018]


Hey Whats going on Guys Welcome Back to the
channel the IT guy and today we’ll see how to create the spinning loading animation using
pure CSS and animations like this comes in handy many times so we’ll quickly see how
to make one so saying that let’s get into the code so we have a basic HTML skeleton structure
ready so I’ll just create a div with the class container which is for the sole purpose to
bring it to the centre of a screen and within this div I’ll create one more div with a class
loading where we are actually do the animation of loading so I’ll do the CSS in this file
only so between the style tags first I’ll set margin and padding to 0 for all the contents
so I’ll do Asterix(*) and within this I’ll set margin and padding to 0 next let’s start
with the container so we want to bring it to the centre of a screen so I just do top
to 50% left to 50% position to absolute and transform translate(-50%,-50%) so we’ll get
it in the center of the screen Now let’s start with the loading so I will create a border
of 6 pixel solid and a light grey colour so i’ll give as #CCC and next I’ll give a width
of 60 pixels and height of 60 pixels so if you save this you will get the box on the
screen as we have a box to convert it to a circle what we have to do is set the border-radius
to 50% so now we’ll get a shape of a circle next I just give a border top colour and a
border left colour to a hex value which will give it a green colour now for the animation
we are going to use this animation property so first is the animation name so I’ll give
it a spin next is animation duration so I’ll give it 1 second and will give the animation
iteration count to infinite so that it loops forever and the animation timing function
to ease in out so after doing this we need to set keyframes for the animation so we’ll
use his @ keyframes and pass the animation name which is spin so for the 0% we will do
this transform rotate zero degree and for the hundred percent we change the transform
to rotate to 360° so after you save this you will start seeing the animation now this
is just a basic one but you can play around with this things and change some properties
depending upon how you want to show the animation for the loading you can change the animation
duration time depending on how fast you want to show the animation now if you want it same
like I showed you in a preview where they were couple of rotations between the starting
and ending point the changes that you have to make is in the hundred percent keyframes
so if you change the rotate to 720 degree then it is going to rotate twice before it
comes to an end so it will look something like this if you want to make the rotation
3 times then you have to just multiply it by 3 to 360 x 3=1080 so now it is going
to take 3 rotations before it stops and then start again so if you’re doing something like
this just keep one thing in mind you have to be in a multiple of 360 degrees because
lets say if I put any random value like 800 then you can see that it kinds of lags before
it starts again for the rotation so it doesn’t look good so if you want to go it smoothly
then you just want to keep it in the multiples of 3 and you can change the animation duration
depending on how fast you want to do it so this basically ends the tutorial and It’s
quite easy and helpful also if if you want some loading animation before showing some
content so I hope you enjoy this video tell me if you are going to implement this in any
projects or not also give a like if you enjoyed this Video and comment what are your thoughts
regarding this animation so that’s it for today and I’ll see you next time Bubyee

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *