Подробное описание и демонстрацией работы эффекта загрузки под номером №99 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 99
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 100px; height: 100px; margin: 40px auto; position: relative; } .loader .box-1, .loader .box-2, .loader .box-3{ width: 100px; height: 100px; border-radius: 50%; border: 5px solid #9b59b6; opacity: 0; position: absolute; top: -4px; left: -4px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .loader .box-1{ -webkit-animation: loading-1 3000ms linear infinite; animation: loading-1 3000ms linear infinite; } .loader .box-2{ -webkit-animation: loading-1 3000ms 2s linear infinite; animation: loading-1 3000ms 2s linear infinite; } .loader .box-3{ -webkit-animation: loading-1 3000ms 1s linear infinite; animation: loading-1 3000ms 1s linear infinite; } @-webkit-keyframes loading-1{ 0%{ -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 15%{ opacity: 1; -webkit-transform: scale(0.25); transform: scale(0.25); } 70%{ opacity: 1; } 90%{ opacity: 0; } 100%{ -webkit-transform: scale(1); transform: scale(1); } } @keyframes loading-1{ 0%{ -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 15%{ opacity: 1; -webkit-transform: scale(0.25); transform: scale(0.25); } 70%{ opacity: 1; } 90%{ opacity: 0; } 100%{ -webkit-transform: scale(1); transform: scale(1); } }