
Подробное описание и демонстрацией работы эффекта загрузки под номером №14 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 14
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner box2"></div> <div class="loader-inner box4"></div> <div class="loader-inner box3"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { width: 75px; height: 75px; margin: 30px auto; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .loader .loader-inner { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); transform: scale(1.1); } .loader .loader-inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FE594D; -webkit-animation: foldthecube 2.4s infinite linear both; animation: foldthecube 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .loader .box2 { transform: scale(1.1) rotateZ(90deg); -webkit-transform: scale(1.1) rotateZ(90deg); } .loader .box3 { transform: scale(1.1) rotateZ(180deg); -webkit-transform: scale(1.1) rotateZ(180deg); } .loader .box4 { transform: scale(1.1) rotateZ(270deg); -webkit-transform: scale(1.1) rotateZ(270deg); } .loader .box2:before { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } .loader .box3:before { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; } .loader .box4:before { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; } @-webkit-keyframes foldthecube { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes foldthecube { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }