Прелаудер для сайта, урокЕсть несколько способов. Рассмотрим один наиболее верный. Самое главное определить на каком фоне будет ваш загрузчик. Можно создать квадратный документ нарисовать кружки выровнять их, от темного к светлому, либо от светлого к темному в зависимости от основного фона сайта. Дальше создаем в фотошопе анимацию по фреймам и крутим наш круг каждый раз на 45 градусов. Этот ход не верный, вы не получите точности и ваш прелаудер будет скакать на области.

Самый верный способ, соответственно самый простой это нарисовать 8мь окружностей, расположить их ровно по кругу. Задать им нужный цвет, цвет фона, на котором они будут крутится, в данном случае чёрный. Это будет наш фон (Это нам нужно, т.к. в гиф нету полупрозрачностей, если оставить без подложки наши окружности будут сливаться с белым.)

Объединяем в папку, дублируем папку и в новой папке перекрашиваем все окружности в нужный цвет, в данном случае оранжевый. Далее создаём круг(Shape), перекрывающий все окружности. И заливаем его через свойства слоя, от чёрного к белому заливкой angle. Это наша маска прозрачности для группы c оранжевыми шариками.

Дальше делаем, как удобно, можно добавлять фреймы и в каждом фрейме менять положение маски, можно сразу продублировать папку 8мь раз, и правильно расположить маску на каждой группе. После этого в каждом кадре включать нужную группу.

Как это выглядит в итоге:

Как сделать прелаудер ф ФШ

Этот прелаудер может быть использован на сайте и в приложении для смартфонов, и много где ещё.

Так же такой preloader легко ресайзить без багов.

Вот как он смотрится на чёрном фоне.

Прелаудер золотой