
Подробное описание и демонстрацией работы эффекта загрузки под номером №134 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 134
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner box-6"></div> <div class="loader-inner box-5"></div> <div class="loader-inner box-4"></div> <div class="loader-inner box-3"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-1"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.loader{ width: 120px; height: 120px; margin: 70px auto; position: relative; animation: loading-1 linear 3.2s infinite; } .loader .loader-inner{ position: absolute; } .loader .loader-inner:before, .loader .loader-inner:after{ content: ""; position: absolute; width: 100%; height: 50%; background: #ee1524; } .loader .loader-inner:before{ top: 0; border-radius: 999px 999px 0 0; animation: loading-2 ease 0.8s alternate infinite; } .loader .loader-inner:after{ bottom: 0; border-radius: 0 0 999px 999px; animation: loading-3 ease 0.8s alternate infinite; background: #45ae2a; } .loader .box-1{ top: 0; left: 0; bottom: 0; right: 0; } .loader .box-2{ top: 10px; left: 10px; bottom: 10px; right: 10px; } .loader .box-3{ top: 20px; left: 20px; bottom: 20px; right: 20px; } .loader .box-4{ top: 30px; left: 30px; bottom: 30px; right: 30px; } .loader .box-5{ top: 40px; left: 40px; bottom: 40px; right: 40px; } .loader .box-6{ top: 50px; left: 50px; bottom: 50px; right: 50px; } .loader .box-2:before, .loader .box-2:after{ background: #faebd7; animation-delay: 50ms; } .loader .box-3:before, .loader .box-3:after{ animation-delay: 100ms; } .loader .box-4:before, .loader .box-4:after{ background: #faebd7; animation-delay: 150ms; } .loader .box-5:before, .loader .box-5:after{ animation-delay: 200ms; } .loader .box-6:before, .loader .box-6:after{ background: #69674f; box-shadow: 0 0 50px #69674f; animation: none; } @-webkit-keyframes loading-1{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @keyframes loading-1{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @-webkit-keyframes loading-2{ from{ top: 0; } to{ top: -60%; } } @keyframes loading-2{ from{ top: 0; } to{ top: -60%; } } @-webkit-keyframes loading-3{ from{ bottom: 0; } to{ bottom: -60%; } } @keyframes loading-3{ from{ bottom: 0; } to{ bottom: -60%; } }