Подробное описание и демонстрацией работы эффекта загрузки под номером №176 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 176
<div class="demo"> <div class="loader"> <div class="loader-inner box-1"> <div class="loader-inner box-2"> <div class="loader-inner box-3"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #036a8c; } .loader{ padding: 20px 0; margin: 20px 0; text-align: center; } .loader .loader-inner{ display: inline-block; border: 3px solid #ffa630; margin: 5px; position: relative; transform-style: preserve-3d; transform: rotateY(90deg); } .loader .box-1{ animation: loading-1 3s ease-in-out infinite; } .loader .box-2{ animation: loading-2 3s ease-in-out infinite; } .loader .box-3{ width: 100px; height: 100px; animation: loading-3 3s ease-in-out infinite; } @keyframes loading-1{ 0%{ -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } 50%{ -webkit-transform: rotateX(200deg); transform: rotateX(200deg); } 100%{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes loading-2{ 0%{ -webkit-transform: rotateY(120deg); transform: rotateY(120deg); } 50%{ -webkit-transform: rotateX(250deg); transform: rotateX(250deg); } 100%{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes loading-3{ 0%{ -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } 50%{ -webkit-transform: rotateX(390deg); transform: rotateX(390deg); } 100%{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } }