Demo 1. Создаем HTML разметку
|
<div id="loader-wrapper"> <div id="loader"></div> </div> |
Два контейнера которые нам нужны для старта #loader-wrapper должен быть в полную ширину и высоту экрана 2. Позиционируем прелоадер
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 3px solid #3498db; z-index: 1500; } |
3. Создаем вложенные элементы Создаем внутренние круги
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid #e74c3c; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid #f9c922; } |
...