Подробное описание и демонстрацией работы эффекта загрузки под номером №58 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 58
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="box box-1"></span> <span class="box box-2"></span> <span class="box box-3"></span> <span class="box box-4"></span> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #4f4f4f; } .loader{ width: 30px; height: 30px; margin: 60px auto; position: relative; -webkit-animation: main-loading 2.5s linear 0.125s infinite normal; animation: main-loading 2.5s linear 0.125s infinite normal; } .loader .box{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; position: absolute; background: #f88827; } .loader .box-1{ top: 0; left: 0; -webkit-animation: loading1 0.3125s linear 0s infinite alternate; animation: loading1 0.3125s linear 0s infinite alternate; } .loader .box-2{ top: 0; right: 0; background: #f1f1f1; -webkit-animation: loading2 0.3125s linear 0s infinite alternate; animation: loading2 0.3125s linear 0s infinite alternate; } .loader .box-3{ bottom: 0; left: 0; background: #f1f1f1; -webkit-animation: loading3 0.3125s linear 0s infinite alternate; animation: loading3 0.3125s linear 0s infinite alternate; } .loader .box-4{ bottom: 0; right: 0; -webkit-animation: loading4 0.3125s linear 0s infinite alternate; animation: loading4 0.3125s linear 0s infinite alternate; } @-webkit-keyframes main-loading{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 15% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 65% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 75% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 90% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes main-loading{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 15% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 65% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 75% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 90% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading1{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(25%, 25%, 0); transform: translate3d(25%, 25%, 0); } } @keyframes loading1{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(25%, 25%, 0); transform: translate3d(25%, 25%, 0); } } @-webkit-keyframes loading2{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(-25%, 25%, 0); transform: translate3d(-25%, 25%, 0); } } @keyframes loading2{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(-25%, 25%, 0); transform: translate3d(-25%, 25%, 0); } } @-webkit-keyframes loading3{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(25%, -25%, 0); transform: translate3d(25%, -25%, 0); } } @keyframes loading3{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(25%, -25%, 0); transform: translate3d(25%, -25%, 0); } } @-webkit-keyframes loading4{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(-25%, -25%, 0); transform: translate3d(-25%, -25%, 0); } } @keyframes loading4{ 0% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 40% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(-25%, -25%, 0); transform: translate3d(-25%, -25%, 0); } }