Подробное описание и демонстрацией работы эффекта загрузки под номером №25 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 25
LOADING
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div> <div class="text">LOADING</div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { position: relative; width: 80px; height: 60px; margin: 30px auto; } .loader .loader-inner { width: 80px; height: 40px; position: absolute; } .loader .loader-inner .box { width: 80px; height: 10px; background-color: #fff; position: absolute; clip: rect(0, 0, 20px, 0); } .loader .loader-inner .box-1 { top: 0; -webkit-animation: loader 2s ease 0s infinite; animation: loader 2s ease 0s infinite; } .loader .loader-inner .box-2 { top: 15px; -webkit-animation: loader 2s ease 0.25s infinite; animation: loader 2s ease 0.25s infinite; } .loader .loader-inner .box-3 { top: 30px; -webkit-animation: loader 2s ease 0.5s infinite; animation: loader 2s ease 0.5s infinite; } .loader .text { position: absolute; top: 50px; text-align: center; width: 100%; color: #fff; font-size: 13px; font-family: sans-serif; letter-spacing: 3px; line-height: 10px; height: 10px; -webkit-animation: fade 1s ease 0s infinite; animation: fade 1s ease 0s infinite; } @-webkit-keyframes loader { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @keyframes loader { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @-webkit-keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }