
Подробное описание и демонстрацией работы эффекта загрузки под номером №68 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 68
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> <div class="loader-inner-4"></div> <div class="loader-inner-5"></div> <div class="loader-inner-6"></div> <div class="loader-inner-7"></div> <div class="loader-inner-8"></div> <div class="loader-inner-9"></div> <div class="loader-inner-10"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.loader{ width: 100px; height: 100px; position: relative; margin: 30px auto 80px; } .loader > div{ background: transparent; opacity: 0; filter: alpha(opacity=0); border: 1px solid #e03400; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-animation: loading 1.2s infinite ease-in-out; -moz-animation: loading 1.2s infinite ease-in-out; -o-animation: loading 1.2s infinite ease-in-out; animation: loading 1.2s infinite ease-in-out; } .loader .loader-inner-1{ width: 3px; height: 3px; background:#00b360; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .loader .loader-inner-2{ width: 10px; height: 10px; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .loader .loader-inner-3{ width: 20px; height: 20px; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } .loader .loader-inner-4{ width: 30px; height: 30px; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } .loader .loader-inner-5{ width: 40px; height: 40px; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .loader .loader-inner-6{ width: 50px; height: 50px; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } .loader .loader-inner-7{ width: 60px; height: 60px; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .loader .loader-inner-8{ width: 70px; height: 70px; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } .loader .loader-inner-9{ width: 80px; height: 80px; -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } .loader .loader-inner-10{ width: 90px; height: 90px; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes loading{ 25% { border-color:#00B360; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes loading{ 25% { border-color:#00B360; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes loading{ 25% { border-color:#00B360; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @keyframes loading{ 25% { border-color:#00B360; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } }