Какая его роль?
Прелоадер — это небольшая анимация, которую человек видит когда заходит на веб-страницу, другими словами — это индикатор загрузки.
Это значимый элемент в веб-разработке с точки зрения юзерфрендли. Если человек заходит на "тяжёлый сайт", напичканный скриптами, файлами и т.п., ему нужно сказать что "всё норм, сайт загружается, подожди".
Сказать это красиво помогут прелоадеры. Вот несколько примеров, которые сможет реализовать даже начинающий.
1. Лесенка загрузки
Исходный код на Codepen - https://codepen.io/ispal/pen/mVaaJe
2. Прелоадер на CSS с использованием sass map для определения цвета
Исходный код на Codepen - https://codepen.io/hexagoncircle/pen/eZawWv
3. А как вам такое?
Исходный код на Codepen - https://codepen.io/derekmorash/pen/grvOZx
4. Этот прелоадер был сделан для веб-приложения из сферы здравоохранения
Исходный код на Codepen - https://codepen.io/chrissamuels/pen/WNybqm
5. Сразу несколько прелоадеров, сделанных с помощью SVG анимации
Исходный код на Codepen - https://codepen.io/nikhil8krishnan/pen/rVoXJa
