Создание вращающегося прелоадера на CSS 3

Demo

1. Создаем HTML разметку

Два контейнера которые нам нужны для старта #loader-wrapper должен быть в полную ширину и высоту экрана

2. Позиционируем прелоадер
img_css3-spinning-preloader-02

3. Создаем вложенные элементы

Создаем внутренние круги

 

4. Переведем квадраты в линии
img_css3-spinning-preloader-03

Теперь линии сделаем радиусными

5. Добавим CSS3 анимации

img_css3-spinning-preloader-01

Читайте также: