
Подробное описание и демонстрацией работы эффекта загрузки под номером №31 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 31
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { display: block; margin: 30px auto; position: relative; width: 100px; height: 100px; } .loader span { display: block; position: absolute; width: 50%; height: 50%; } .loader span:nth-child(1) { top: 0; left: 0; background-color: #f38630; -webkit-animation: loading1 2s linear infinite; animation: loading1 2s linear infinite; } .loader span:nth-child(2) { top: 0; right: 0; background: #588c73; -webkit-animation: loading2 2s linear infinite; animation: loading2 2s linear infinite; } .loader span:nth-child(3) { bottom: 0; left: 0; background: #9b539c; -webkit-animation: loading3 2s linear infinite; animation: loading3 2s linear infinite; } .loader span:nth-child(4) { bottom: 0; right: 0; background: #d94e67; -webkit-animation: loading4 2s linear infinite; animation: loading4 2s linear infinite; } @-webkit-keyframes loading1 { 0% { -webkit-transform: translate(0); transform: translate(0); z-index: 10; } 25% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 50% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } 75% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); z-index: 0; } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes loading1 { 0% { -webkit-transform: translate(0); transform: translate(0); z-index: 10; } 25% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 50% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } 75% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); z-index: 0; } 100% { -webkit-transform: translate(0); transform: translate(0); } } @-webkit-keyframes loading2 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 50% { -webkit-transform: translate(-100%, 100%); transform: translate(-100%, 100%); z-index: 0; } 75% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); z-index: 10; } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes loading2 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 50% { -webkit-transform: translate(-100%, 100%); transform: translate(-100%, 100%); z-index: 0; } 75% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); z-index: 10; } 100% { -webkit-transform: translate(0); transform: translate(0); } } @-webkit-keyframes loading3 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); z-index: 10; } 50% { -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%); } 75% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 100% { -webkit-transform: translate(0); transform: translate(0); z-index: 0; } } @keyframes loading3 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); z-index: 10; } 50% { -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%); } 75% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 100% { -webkit-transform: translate(0); transform: translate(0); z-index: 0; } } @-webkit-keyframes loading4 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); z-index: 0; } 50% { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); z-index: 10; } 75% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes loading4 { 0% { -webkit-transform: translate(0); transform: translate(0); } 25% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); z-index: 0; } 50% { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); z-index: 10; } 75% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0); transform: translate(0); } }