Подробное описание и демонстрацией работы эффекта загрузки под номером №107 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 107
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 100px; height: 100px; border-radius: 50%; margin: 60px auto; } .loader .loader-inner, .loader .loader-inner:before, .loader .loader-inner:after{ border: 2px solid transparent; border-radius: 50%; } .loader .loader-inner{ width: 100px; height: 100px; position: relative; border-top-color: #295cb8; border-bottom-color: #295cb8; -webkit-animation: loading-1 1s infinite linear; animation: loading-1 1s infinite linear; } .loader .loader-inner:before{ content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border-left-color: #1a91a0; border-right-color: #1a91a0; } .loader .loader-inner:after{ content: ""; position: absolute; top: 22px; right: 22px; bottom: 22px; left: 22px; border-top-color: #dd2d62; border-bottom-color: #dd2d62; } @-webkit-keyframes loading-1{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-1{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } }