
Подробное описание и демонстрацией работы эффекта загрузки под номером №126 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 126
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"></div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 16px; height: 16px; border-radius: 50%; background: #fcc25e; margin: 70px auto; overflow: hidden; position: relative; box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px; -webkit-animation: loading-1 5s infinite ease-in-out; animation: loading-1 5s infinite ease-in-out; } @-webkit-keyframes loading-1{ 0%{ transform: rotate(0deg); box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px; } 50%{ transform: rotate(1080deg); box-shadow: #fff 0 0 15px 0, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px; } } @keyframes loading-1{ 0%{ transform: rotate(0deg); box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px; } 50%{ transform: rotate(1080deg); box-shadow: #fff 0 0 15px 0, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px; } }