Подробное описание и демонстрацией работы эффекта загрузки под номером №32 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 32
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ position:relative; width: 100px; height: 30px; margin: 30px auto; } .loader span{ position:absolute; width:20px; height:20px; border-radius:50%; background:#da2431; opacity:0.5; -webkit-animation: preloader_4 1s infinite ease-in-out; -moz-animation: preloader_4 1s infinite ease-in-out; -ms-animation: preloader_4 1s infinite ease-in-out; -animation: preloader_4 1s infinite ease-in-out; } .loader span:nth-child(2){ left:20px; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; animation-delay: .2s; } .loader span:nth-child(3){ left:40px; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -ms-animation-delay: .4s; animation-delay: .4s; } .loader span:nth-child(4){ left:60px; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; animation-delay: .6s; } .loader span:nth-child(5){ left:80px; -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -ms-animation-delay: .8s; animation-delay: .8s; } @-webkit-keyframes preloader_4 { 0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 50% {opacity: 1; -webkit-transform: translateY(-10px); background:#8ac16c; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 100% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} } @-moz-keyframes preloader_4 { 0% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 50% {opacity: 1; -moz-transform: translateY(-10px); background:#8ac16c; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 100% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} } @-ms-keyframes preloader_4 { 0% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 50% {opacity: 1; -ms-transform: translateY(-10px); background:#8ac16c; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 100% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} } @keyframes preloader_4 { 0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 50% {opacity: 1; transform: translateY(-10px); background:#8ac16c; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} }