Подробное описание и демонстрацией работы эффекта загрузки под номером №195 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 195
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #2e3f9d; } .loader{ width: 50px; height: 50px; margin: 50px auto; position: relative; } .loader .loader-inner{ width: 50px; height: 50px; border: 2px solid #fff; border-radius: 0; animation: loading-1 4.5s infinite linear; } .loader .loader-inner:after{ content: ""; width: 14px; height: 14px; background: #fff; border-radius: 20px; margin: -7px 0 0 -7px; position: absolute; top: 50%; left: 50%; animation: loading-2 4.5s infinite linear; } @keyframes loading-1{ 0%{ transform:scale(0); } 10%{ transform:scale(1.3); } 12%{ transform:scale(1); } 15%{ transform:scale(1.3); } 17%{ transform:scale(1); } 25%{ transform:scale(1); } 40%{ transform:scale(1) rotate(180deg); border-radius:20px; } 42%{ transform:scale(1) rotate(180deg); border-radius:0; } 44%{ transform:scale(1) rotate(180deg); border-radius:20px; } 46%{ transform:scale(1) rotate(180deg); border-radius:0; } 48%{ transform:scale(1) rotate(180deg); border-radius:20px; } 50%{ transform:scale(1) rotate(180deg); border-radius:20px; } 95%{ transform:scale(1) rotate(180deg); border-radius:20px; } 100%{ transform:scale(0) rotate(180deg); border-radius:100px; } } @keyframes loading-2{ 0%{ transform:scale(0); } 45%{ transform:scale(0); } 50%{ transform:scale(1); } 55%{ transform:scale(1) translateY(-20px) translateX(-14px); } 60%{ transform:scale(1) translateY(20px) translateX(14px); } 65%{ transform:scale(1) translateY(-20px) translateX(14px); } 70%{ transform:scale(1) translateY(20px) translateX(-14px); } 75%{ transform:scale(1) translateY(-20px) translateX(14px); } 80%{ transform:scale(1) translateY(20px) translateX(-14px); } 85%{ transform:scale(1) translateY(-20px) translateX(-14px); } 90%{ transform:scale(1) translateY(0px) translateX(0px); } 95%{ transform:scale(1.5); } 100%{ transform:scale(0); } }