
Подробное описание и демонстрацией работы эффекта загрузки под номером №41 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 41
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="main-box box-1"></div> <div class="main-box box-2"></div> <div class="main-box box-3"></div> <div class="main-box box-4"></div> <div class="main-box box-5"></div> <div class="main-box box-6"></div> <div class="main-box box-7"></div> <div class="main-box box-8"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 100px; height: 100px; border-radius: 50%; background: #9fcd98; margin: 20px auto; position: relative; } .main-box{ width: 10px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -5px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .main-box:before { content: ''; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 0; left: 0; background: #fff3e0; } .box-0 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .box-0:before { -webkit-animation: loading 2s infinite 0s ease-in-out; animation: loading 2s infinite 0s ease-in-out; } .box-1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .box-1:before { -webkit-animation: loading 2s infinite 0.1s ease-in-out; animation: loading 2s infinite 0.1s ease-in-out; } .box-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .box-2:before { -webkit-animation: loading 2s infinite 0.2s ease-in-out; animation: loading 2s infinite 0.2s ease-in-out; } .box-3 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .box-3:before { -webkit-animation: loading 2s infinite 0.3s ease-in-out; animation: loading 2s infinite 0.3s ease-in-out; } .box-4 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .box-4:before { -webkit-animation: loading 2s infinite 0.4s ease-in-out; animation: loading 2s infinite 0.4s ease-in-out; } .box-5 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .box-5:before { -webkit-animation: loading 2s infinite 0.5s ease-in-out; animation: loading 2s infinite 0.5s ease-in-out; } .box-6 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .box-6:before { -webkit-animation: loading 2s infinite 0.6s ease-in-out; animation: loading 2s infinite 0.6s ease-in-out; } .box-7 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } .box-7:before { -webkit-animation: loading 2s infinite 0.7s ease-in-out; animation: loading 2s infinite 0.7s ease-in-out; } .box-8 { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .box-8:before { -webkit-animation: loading 2s infinite 0.8s ease-in-out; animation: loading 2s infinite 0.8s ease-in-out; } @-webkit-keyframes loading { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(9rem); transform: translateY(9rem); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes loading { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(9rem); transform: translateY(9rem); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }