Подробное описание и демонстрацией работы эффекта загрузки под номером №40 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 40
N
I
A
R
Y
R
E
U
Q
J
<div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="loader"> <div class="purple">N</div> <div class="purple">I</div> <div class="purple">A</div> <div class="purple">R</div> <div class="pink">Y</div> <div class="pink">R</div> <div class="pink">E</div> <div class="pink">U</div> <div class="pink">Q</div> <div class="pink">J</div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { position:relative; height:36px; overflow: hidden; margin: 20px 0; } .loader div { position:absolute; width:20px; height:36px; font-size: 15px; opacity:0; font-family: Arial, sans-serif; animation:loading 2s linear infinite; -o-animation:loading 2s linear infinite; -moz-animation:loading 2s linear infinite; -webkit-animation:loading 2s linear infinite; transform:rotate(180deg); -o-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); } .pink{ color: #dc005a; } .purple{ color: #7a4b94; } .loader div:nth-child(1) { animation-delay: 0.1s; -o-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } .loader div:nth-child(2) { animation-delay: 0.2s; -o-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } .loader div:nth-child(3) { animation-delay: 0.3s; -o-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } .loader div:nth-child(4) { animation-delay: 0.4s; -o-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; } .loader div:nth-child(5) { animation-delay: 0.5s; -o-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } .loader div:nth-child(6) { animation-delay: 0.6s; -o-animation-delay:0.6s; -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; } .loader div:nth-child(7) { animation-delay: 0.7s; -o-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; } .loader div:nth-child(8) { animation-delay: 0.8s; -o-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; } .loader div:nth-child(9) { animation-delay: 0.9s; -o-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; } .loader div:nth-child(10) { animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; } @keyframes loading { 0% { left:0; opacity:0; } 35% { left: 41%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -moz-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-moz-keyframes loading { 0% { left:0; opacity:0; } 35% { left:41%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -moz-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-webkit-keyframes loading { 0% { left:0; opacity:0; } 35% { left:41%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -webkit-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-o-keyframes loading { 0% { left:0; opacity:0; } 35% { left:41%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } }