
Подробное описание и демонстрацией работы эффекта загрузки под номером №109 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 109
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box-1"></div> <div class="box-2"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #564056; } .loader{ width: 270px; height: 170px; margin: 40px auto 0; position: relative; } .loader .loader-inner{ width: 86px; height: 86px; background: #564056; position: absolute; top: 0; left: 30%; } .loader .box-1{ width: 18px; height: 18px; border-radius: 15%; position: absolute; bottom: -3px; left: 0; background: transparent; border: 4px solid #f5f5f5; transform: translate(0, -1em) rotate(-45deg); animation: loading-1 2.5s cubic-bezier(.79, 0, .47, .97) infinite; } .loader .box-2{ width: 113px; height: 113px; position: absolute; top: 27px; left: 27px; border-left: 4px solid #f5f5f5; transform: rotate(45deg); } @-webkit-keyframes loading-1{ 0%{ transform: translate(0, -1em) rotate(-45deg); } 5%{ transform: translate(0, -1em) rotate(-50deg); } 20%{ transform: translate(1em, -2em) rotate(47deg); } 25%{ transform: translate(1em, -2em) rotate(45deg); } 30%{ transform: translate(1em, -2em) rotate(40deg); } 45%{ transform: translate(2em, -3em) rotate(137deg); } 50%{ transform: translate(2em, -3em) rotate(135deg); } 55%{ transform: translate(2em, -3em) rotate(130deg); } 70%{ transform: translate(3em, -4em) rotate(217deg); } 75%{ transform: translate(3em, -4em) rotate(220deg); } 100%{ transform: translate(0, -1em) rotate(-225deg); } } @keyframes loading-1{ 0%{ transform: translate(0, -1em) rotate(-45deg); } 5%{ transform: translate(0, -1em) rotate(-50deg); } 20%{ transform: translate(1em, -2em) rotate(47deg); } 25%{ transform: translate(1em, -2em) rotate(45deg); } 30%{ transform: translate(1em, -2em) rotate(40deg); } 45%{ transform: translate(2em, -3em) rotate(137deg); } 50%{ transform: translate(2em, -3em) rotate(135deg); } 55%{ transform: translate(2em, -3em) rotate(130deg); } 70%{ transform: translate(3em, -4em) rotate(217deg); } 75%{ transform: translate(3em, -4em) rotate(220deg); } 100%{ transform: translate(0, -1em) rotate(-225deg); } }