Working with preloaders…
This was a thing that I heard recently and I didn't have any idea about it. So searched about these preloaders. Then I figured out that this was not a new thing and I have seen those things before.
On a website, some sections are consuming some time to load the data to the website. Until the data has been loaded, the page looks empty. So, to avoid that we use these preloaders. For example, I have a web page with several profile images and names of some people on it, and takes about 3-4 seconds to load those images to the web page. Until then the whole page looks empty. To avoid that we can use a preloader.
I worked with two types of preloaders. The most common one is GIFs. Some web pages use these GIFs for the whole page, and after receiving data suddenly the GIF is replaced by the page content. This is an easy one to create. You can browse for preloader GIFs on google, select a suitable one for you, and write some CCS to align the preloader to the center of the page. Then you have to make the preloader GIF visible at first and after the content is loaded, just have to replace the preloader with the page content.
The next preloader type is skeletons, this looks professional compared to the full-page GIFs.Let's say I have used these skeletons in my above-mentioned website. So skeletons are visible only in the relevant places that must be replaced by images or words. As an example, if we have a circle-shaped profile image, we can create a skeleton of the same size and shape as the profile image. As the transition for that, we use blinking or shining animation so the skeleton animation runs until the page replaces it with the actual data. Most commonly gray-ranged colors are used for these skeletons.
First, we have to create shapes with CSS which are similar to the original profile images, cards, or content boxes. Then the next thing is to create a transition for those skeleton shapes. The most commonly used transitions are the shinning one and the blinking one or you can create your own transition.
I worked on an issue about preloaders on the Sefglobal website and I was assigned to create the preloaders for the “Team ” page. So I worked on the GIF preloader at the beginning but after a discussion with the Dev team, we have decided to move to the Skeleton preloaders. Have a look at the below page. I was finally able to finish the task by adding skeleton preloaders to that page.
https://sefglobal.org/team.html
So those are the things I learned about preloaders throughout this task 😁