
Подробное описание и демонстрацией работы эффекта загрузки под номером №16 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
L
O
A
D
I
N
G
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> <div class="loader-inner"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> </div>
.loader { position: relative; margin: 40px auto 0; width: 350px; color: white; text-align: center; font-size: 250%; background: linear-gradient(180deg, #ffff00 0, #444 100%); box-shadow: inset 0 5px 20px black; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); } .loader:after{ content: ""; display: table; clear: both; } span{ float: left; height: 100px; line-height: 120px; width: 50px; } .loader > span { border-left: 1px solid #444; border-right: 1px solid #222; } .loader-inner { position: absolute; height: 100%; width: 100%; } .loader-inner span { background: linear-gradient(180deg, white 0, #ddd 100%); animation: up 2s infinite; } @keyframes up { 0% { margin-bottom: 0; } 16% { margin-bottom: 100%; height: 20px; } 50% { margin-bottom: 0; } 100% { margin-bottom: 0; } } .loader-inner span:nth-child(2) { animation-delay: .142857s; } .loader-inner span:nth-child(3) { animation-delay: .285714s; } .loader-inner span:nth-child(4) { animation-delay: .428571s; } .loader-inner span:nth-child(5) { animation-delay: .571428s; } .loader-inner span:nth-child(6) { animation-delay: .714285s; } .loader-inner span:nth-child(7) { animation-delay: .857142s; } @media only screen and (max-width: 480px) { .loader{ width: 77.8%; font-size: 200%; } span{ width: 14.28%; } }