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
{% codepen https://codepen.io/alim1496/pen/mdWLZrZ %}
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
{% codepen https://codepen.io/alim1496/pen/MWpXaWJ %}
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
{% codepen https://codepen.io/alim1496/pen/eYvQKLQ %}
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
{% codepen https://codepen.io/alim1496/pen/MWpRWXG %}
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
{% codepen https://codepen.io/alim1496/pen/RwpOOvZ %}
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.
Happy Coding 😀😀😀😀😀
