Подробное описание и демонстрацией работы эффекта загрузки под номером №212 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 212
<div class="preloader"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{ height: 105px; width: 105px; margin: 0 auto; animation: loader-container 10s linear infinite; } .preloader > div{ width: 44px; height: 44px; box-shadow: 0 0 8px -2px rgba(0,0,0,0.3); position: absolute; animation-duration: 1500ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .box1{ background: linear-gradient(-45deg,#ff0000,#d60c0c); transform-origin: bottom center; top: 4px; left: 4px; animation-name: box1; } .box2{ background: linear-gradient(-45deg,#15c109,#29870d); transform-origin: center left; top: 4px; right: 4px; animation-name: box2; } .box3{ background: linear-gradient(-45deg,#c300ff,#a808a8); transform-origin: top center; bottom: 4px; right: 4px; animation-name: box3; } .box4{ background: linear-gradient(-45deg,#fc8e28,#ea7e0b); transform-origin: center right; bottom: 4px; left: 4px; animation-name: box4; } @keyframes loader-container{ 0%{ transform: rotate(0); } 23%{ transform: rotate(0); } 25%{ transform: rotate(90deg); } 48%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 73%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); } 98%{ transform: rotate(270deg); } 100%{ transform: rotate(360deg); } } @keyframes box1{ 0%{ transform: perspective(200px) rotateX(90deg); } 11%{ transform: perspective(200px) rotateX(0); } 88%{ transform: perspective(200px) rotateX(0); } 99%{ transform: perspective(200px) rotateX(90deg); } 100%{ transform: perspective(200px) rotateX(90deg); } } @keyframes box2{ 0%{ transform: perspective(200px) rotateY(90deg); } 11%{ transform: perspective(200px) rotateY(90deg); } 22%{ transform: perspective(200px) rotateY(0); } 77%{ transform: perspective(200px) rotateY(0); } 88%{ transform: perspective(200px) rotateY(90deg); } 100%{ transform: perspective(200px) rotateY(90deg); } } @keyframes box3{ 0%{ transform: perspective(200px) rotateX(-90deg); } 22%{ transform: perspective(200px) rotateX(-90deg); } 33%{ transform: perspective(200px) rotateX(0); } 66%{ transform: perspective(200px) rotateX(0); } 77%{ transform: perspective(200px) rotateX(-90deg); } 100%{ transform: perspective(200px) rotateX(-90deg); } } @keyframes box4{ 0%{ transform: perspective(200px) rotateY(-90deg); } 33%{ transform: perspective(200px) rotateY(-90deg); } 44%{ transform: perspective(200px) rotateY(0); } 55%{ transform: perspective(200px) rotateY(0); } 66%{ transform: perspective(200px) rotateY(-90deg); } 100%{ transform: perspective(200px) rotateY(-90deg); } }