
Подробное описание и демонстрацией работы эффекта загрузки под номером №144 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 144
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <span></span> <span></span> <span></span> </div> <div class="box box-1"> <div class="box-inner"></div> </div> <div class="box box-2"> <div class="box-inner"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #e5ebc4; } .loader{ width: 100px; height: 100px; margin: 50px auto; text-align: center; } .loader .loader-inner{ width: 100px; height: 25px; position: relative; opacity: 0; animation: 2s loading-3 infinite linear 2s; } .loader .loader-inner span{ display: block; width: 6px; height: 15px; background: #fff; position: absolute; box-shadow: 0 0 1px #fff; transform-origin: bottom; } .loader .loader-inner span:nth-child(1){ bottom: 5px; left: 36px; transform: rotate(-35deg); } .loader .loader-inner span:nth-child(2){ bottom: 8px; left: 44px; } .loader .loader-inner span:nth-child(3){ bottom: 5px; left: 52px; transform: rotate(35deg); } .loader .box{ height: 36px; position: relative; } .loader .box:after{ content: ""; width: 20px; height: 5px; background: #fff; box-shadow: 0 0 1px #fff; position: absolute; top: 47px; left: 5px; } .loader .box-inner{ width: 30px; height: 36px; background: #fff; border-radius: 0 0 36px 36px; box-shadow: 0 0 1px #fff; } .loader .box-inner:before{ content: ""; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(transparent 50%, #f5b221 50%); position: absolute; left: 4px; bottom: 4px; } .loader .box-inner:after{ content: ""; width: 6px; height: 13px; background: #fff; box-shadow: 0 0 1px #fff; position: absolute; top: 35px; left: 12px; } .loader .box-1{ display: inline-block; margin-right: 10px; animation: loading-1 2s cubic-bezier(.39,1.52,.46,.92) infinite; } .loader .box-2{ display: inline-block; animation: loading-2 2s cubic-bezier(.39,1.52,.46,.92) infinite; } .loader .box-1 .box-inner:before{ animation: loading-2 2s linear infinite; } .loader .box-2 .box-inner:before{ animation: loading-1 2s linear infinite; } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform:rotate(22deg); } } @keyframes loading-2{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(-22deg); } } @keyframes loading-3{ 0%{ opacity: 0; transform: scaleY(1); } 33%{ opacity: 1; transform: scaleY(1.4); } 64%{ opacity: .1; transform: scaleY(1); } 100%{ opacity: 0; transform: scaleY(.3); } }