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
animations we can design a lot of preloaders easily. Lets have a look at some simple preloaders developed with css.
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.
This very code is similar to that of Loader 1 just have a look at the
border-left-color properties. Instead of
border-top those two properties have been added and made
transparent what did the trick.
Here we can see that the circular loader is loading like wave. This wave effect has been created with the help of
after selectors along with
transform: scale() property. This very
scale property along with the animation is creating the wave effect continuously.
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.
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.