Подробное описание и демонстрацией работы эффекта загрузки под номером №55 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 55
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 50px; height: 50px; margin: 30px auto; position: relative; } .loader-inner{ width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; animation: loading2 4s infinite ease-in, loading1 2s infinite ease-in; } .loader-inner:after{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ecf0f1; position: absolute; top: 50%; left: 50%; transform-origin: left top; animation: loading3 1s infinite linear; } @-webkit-keyframes loading1{ from { width: 40px; height: 40px; } 25% { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } 50% { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } 75% { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } to { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } } @keyframes loading1{ from { width: 40px; height: 40px; } 25% { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } 50% { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } 75% { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } to { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } } @-webkit-keyframes loading2{ from { background-color: #727cb6; } 25% { background-color: #e67e22; } 50% { background-color: #1abc9c; } 75% { background-color: #ed687c; } to { background-color: #727cb6; } } @keyframes loading2{ from { background-color: #727cb6; } 25% { background-color: #e67e22; } 50% { background-color: #1abc9c; } 75% { background-color: #ed687c; } to { background-color: #727cb6; } } @-webkit-keyframes loading3{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes loading3{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }