
Подробное описание и демонстрацией работы эффекта загрузки под номером №85 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 85
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <span></span> <span></span> <span></span> <span></span> </div> <div class="loader-inner2"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #011627; } .loader{ width: 300px; height: 300px; margin: 0 auto; position: relative; } .loader .loader-inner{ z-index: 5; } .loader .loader-inner, .loader .loader-inner2{ width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); animation: loading-1 1.8s ease-in-out 0s infinite both; } .loader .loader-inner span, .loader .loader-inner2 span{ display: block; width: 40px; height: 40px; position: absolute; background: #e71d36; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } .loader .loader-inner span:nth-child(1), .loader .loader-inner2 span:nth-child(1){ top: 0; left: 0; } .loader .loader-inner span:nth-child(2), .loader .loader-inner2 span:nth-child(2){ top: 0; right: 0; } .loader .loader-inner span:nth-child(3), .loader .loader-inner2 span:nth-child(3){ bottom: 0; left: 0; } .loader .loader-inner span:nth-child(4), .loader .loader-inner2 span:nth-child(4){ bottom: 0; right: 0; } .loader .loader-inner2{ z-index: 1; animation: loading-2 1.8s ease-in-out 0s infinite both; } .loader .loader-inner2 span{ background: #2ec4b6; -webkit-filter: blur(2.5px); -moz-filter: blur(2.5px); -o-filter: blur(2.5px); -ms-filter: blur(2.5px); filter: blur(2.5px); } @-webkit-keyframes loading-1{ 0%, 100%{ width: 80px; height: 80px; } 65%{ width: 150px; height: 150px; } } @keyframes loading-1{ 0%, 100% { width: 80px; height: 80px; } 65% { width: 150px; height: 150px; } } @-webkit-keyframes loading-2{ 0%, 100%{ width: 80px; height: 80px; } 65%{ width: 180px; height: 180px; } } @keyframes loading-2{ 0%, 100%{ width: 80px; height: 80px; } 65%{ width: 180px; height: 180px; } }