Подробное описание и демонстрацией работы эффекта загрузки под номером №102 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 102
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner box-1"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-3"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #40413f; } .loader{ width: 60px; height: 50px; margin: 50px auto; position: relative; } .loader .loader-inner{ position: absolute; border-top: 24px solid #ffe100; border-left: 14.43px solid transparent; border-right: 14.43px solid transparent; } .loader .box-1{ -webkit-animation: loading-1 4s linear infinite; animation: loading-1 4s linear infinite; } .loader .box-2{ -webkit-animation: loading-2 4s linear infinite; animation: loading-2 4s linear infinite; } .loader .box-3{ -webkit-animation: loading-3 4s linear infinite; animation: loading-3 4s linear infinite; } @-webkit-keyframes loading-1{ 5%{ transform: rotate(0deg); top: 0; left: 0; } 10%, 35%{ transform: rotate(120deg); top: -6px; left: -3px; } 40%, 65%{ transform: rotate(240deg); top: -6px; left: 4px; } 70%, 95%{ transform: rotate(360deg); top: 0; left: 0; } 100%{ transform: rotate(360deg) translate(0px); top: 0; left: 0; } } @keyframes loading-1{ 5%{ transform: rotate(0deg); top: 0; left: 0; } 10%, 35%{ transform: rotate(120deg); top: -6px; left: -3px; } 40%, 65%{ transform: rotate(240deg); top: -6px; left: 4px; } 70%, 95%{ transform: rotate(360deg); top: 0; left: 0; } 100%{ transform: rotate(360deg) translate(0px); top: 0; left: 0; } } @-webkit-keyframes loading-2{ 5%{ transform: rotate(0deg); top: 0; left: 28px; } 10%, 35%{ transform: rotate(120deg); top: -6px; left: 25px; } 40%, 65%{ transform: rotate(240deg); top: -6px; left: 32px; } 70%, 95%{ transform: rotate(360deg); top: 0; left: 28px; } 100%{ transform: rotate(360deg) translate(0px); top: 0; left: 28px; } } @keyframes loading-2{ 5%{ transform: rotate(0deg); top: 0; left: 28px; } 10%, 35%{ transform: rotate(120deg); top: -6px; left: 25px; } 40%, 65%{ transform: rotate(240deg); top: -6px; left: 32px; } 70%, 95%{ transform: rotate(360deg); top: 0; left: 28px; } 100%{ transform: rotate(360deg) translate(0px); top: 0; left: 28px; } } @-webkit-keyframes loading-3{ 5%{ transform: rotate(0deg); top: 24px; left: 14px; } 10%, 35%{ transform: rotate(120deg); top: 18px; left: 11px; } 40%, 65%{ transform: rotate(240deg); top: 18px; left: 18px; } 70%, 95%{ transform: rotate(360deg); top: 24px; left: 14px; } 100%{ transform: rotate(360deg) translate(0px); top: 24px; left: 14px; } } @keyframes loading-3{ 5%{ transform: rotate(0deg); top: 24px; left: 14px; } 10%, 35%{ transform: rotate(120deg); top: 18px; left: 11px; } 40%, 65%{ transform: rotate(240deg); top: 18px; left: 18px; } 70%, 95%{ transform: rotate(360deg); top: 24px; left: 14px; } 100%{ transform: rotate(360deg) translate(0px); top: 24px; left: 14px; } }