В данной статье рассмотрим создание анимации загрузки с помощью чистого CSS3.
HTML
Для начала создаем блок в котором будет показываться загрузка:
<div class="preloader"></div>
CSS
Теперь пропишем ему стили:
@-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .preloader { width: 30px; height: 30px; border: 7px solid #000; border-left-color: #333; border-right-color: transparent; border-bottom-color: #555; border-radius: 100%; -webkit-animation: spin 600ms infinite linear; -moz-animation: spin 600ms infinite linear; -ms-animation: spin 600ms infinite linear; animation: spin 600ms infinite linear; }
Мы сначала задали ширину и высоту блока, затем задали рамку шириной в 7px сплошным черным цветом. Далее левую и нижнюю рамку мы сделали разными цветами, а правую - прозрачной. Это делается для того чтобы эффект был более заметен. В конце мы скруглили края у блока и задали линейную анимацию, которая и вращает наш круг, делая эффект загрузки.