
Подробное описание и демонстрацией работы эффекта загрузки под номером №13 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 13
LOADING
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> <div class="box2">LOADING</div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
@import url("http://fonts.googleapis.com/css?family=Press+Start+2P"); .loader{ width: 200px; margin: 30px auto; } .loader-inner{ overflow: hidden; height: 50px; border-left: 2px solid #3d3d3d; border-right: 2px solid #3d3d3d; } .box{ position: relative; left: -200px; margin-top: 10px; width: 100%; height: 30px; background: #33ffbf; border: 1px solid #a3ffd9; box-shadow: 0px 0px 4px 1px #21ffb9; animation: preload-status-animate 1.5s infinite cubic-bezier(.75, 0, .25, 1); } .box2{ opacity: 1; margin-top: -22px; width: 100%; height: 30px; font-family: "Press Start 2P", Arial, sans-serif; text-align: center; color:#35ffbf; text-shadow: 0px 1px #87ffe5; animation: preload-status-animate-2 1.5s infinite cubic-bezier(.75, 0, .25, 1); } @keyframes preload-status-animate { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(400px); transform: translateX(400px) } } @keyframes preload-status-animate-2 { 0% { opacity: 1; } 10% { opacity: 1; } 50% { opacity: 0; } 90% { opacity: 1; } }