
Подробное описание и демонстрацией работы эффекта загрузки под номером №146 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 146
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> </div> <div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #3d405b; } .loader{ width: 195px; height: 30px; margin: 60px auto; position: relative; transform: rotate(180deg); } .loader .box-1, .loader .box-2{ width: 15px; height: 15px; border-radius: 50%; background: #f4d761; position: absolute; top: 0; -webkit-animation: loading-1 0.46s ease infinite; animation: loading-1 0.46s ease infinite; } .loader .box-2{ -webkit-animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s; animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s; } .loader .box-1:nth-child(1){ left: 14.28571%; animation-delay: 0.29s; } .loader .box-1:nth-child(2){ left: 28.57143%; animation-delay: 0.58s; } .loader .box-1:nth-child(3){ left: 42.85714%; animation-delay: 0.86s; } .loader .box-1:nth-child(4){ left: 57.14286%; animation-delay: 1.15s; } .loader .box-1:nth-child(5){ left: 71.42857%; animation-delay: 1.44s; } .loader .box-1:nth-child(6){ left: 85.71429%; animation-delay: 1.73s; } .loader .box-1:nth-child(7){ left: 100%; animation-delay: 2.01s; } .loader .box-2:nth-child(1){ left: 14.28571%; animation-delay: 0.29s; } .loader .box-2:nth-child(2){ left: 28.57143%; animation-delay: 0.58s; } .loader .box-2:nth-child(3){ left: 42.85714%; animation-delay: 0.86s; } .loader .box-2:nth-child(4){ left: 57.14286%; animation-delay: 1.15s; } .loader .box-2:nth-child(5){ left: 71.42857%; animation-delay: 1.44s; } .loader .box-2:nth-child(6){ left: 85.71429%; animation-delay: 1.73s; } .loader .box-2:nth-child(7){ left: 100%; animation-delay: 2.01s; } @-webkit-keyframes loading-1{ from{ top: 0; } to{ top: 39px; transform: scale(0.75); z-index: 1; opacity: 0; } } @keyframes loading-1{ from{ top: 0; } to{ top: 39px; transform: scale(0.75); z-index: 1; opacity: 0; } } @-webkit-keyframes loading-2{ from{ top: 39px; transform: scale(0.75); z-index: 2; } to{ top: 0; } } @keyframes loading-2{ from{ top: 39px; transform: scale(0.75); z-index: 2; } to{ top: 0; } } @-webkit-keyframes loading-3{ from{ top: 0; } to{ top: 0; } } @keyframes loading-3{ from{ top: 0; } to{ top: 0; } }