Most of the websites now-a-days fetch data from remote server and then display it to the user. This very fetching of data being an asynchronous task it takes some times to be displayed. In the meantime preloader or loader is shown to the user. Using css selectors
and animations
we can design a lot of preloaders easily. Lets have a look at some simple preloaders developed with css.
Circular Loader 1
If you have a look at the css code, the border-top
property is the bluish portion on the cirular path. If animation
property is not used then it will remain fixed on the top of whitish cirular path. The animation
does the trick here. This is linear
means its speed will be uniform & it will continue infinite
times and take 1s
to complete one cycle.
Circular Loader 2
This very code is similar to that of Loader 1 just have a look at the border-right-color
and border-left-color
properties. Instead of border-top
those two properties have been added and made transparent
what did the trick.
Circular Wave Loader
Here we can see that the circular loader is loading like wave. This wave effect has been created with the help of before
and after
selectors along with transform: scale()
property. This very scale
property along with the animation is creating the wave effect continuously.
Circular Dot Loader
Here there are total 8 dots. Initially without animation
property three dots will be visible. Each dot has been created with the help of box-shadow
property. The dotSpin
keyframe is divided into 8 percentage areas representing each dot. Each percentage area's box-shadow
has 8 values 3 of which are bluish
colored and rest 5 are white or invisible. Thus the animation has been created.
Ellipsis Loader
We know about the text-overflow: ellipsis
property that shows ...
when text is overflowed. Here such ellipsis has been used as a loader. Here the ASCII code of ellipsis \2026
has been added at after
selector and the width
property is varying in the keyframe
which does the trick for the animation.
Top comments (0)