Подробное описание и демонстрацией работы эффекта загрузки под номером №199 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 199
<div class="loader"> <div class="loader-inner"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 300px; height: 100px; margin: 40px auto; position: relative; } .loader .loader-inner{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: loading-5 2s infinite alternate; } .loader .loader-inner div{ width: 100%; height: 100%; background: #ec5766; position: absolute; top: 0; left: 0; } .loader .box-1{ clip-path: polygon(0% 0%, 0% 100%, 50% 50%); animation: loading-1 2s infinite alternate; } .loader .box-2{ clip-path: polygon(0% 0%, 100% 0%, 50% 50%); animation: loading-2 2s infinite alternate; } .loader .box-3{ clip-path: polygon(100% 0%, 100% 100%, 50% 50%); animation: loading-3 2s infinite alternate; } .loader .box-4{ clip-path: polygon(100% 100%, 0% 100%, 50% 50%); animation: loading-4 2s infinite alternate; } @keyframes loading-1{ 0%,10%{ background: #ec5766; -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%); clip-path: polygon(0% 0%, 0% 100%, 50% 50%); } 90%,100%{ background: #004260; -webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%); clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%); } } @keyframes loading-2{ 0%,10%{ background: #ec5766; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%); clip-path: polygon(0% 0%, 100% 0%, 50% 50%); } 90%,100%{ background: #004260; -webkit-clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%); clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%); } } @keyframes loading-3{ 0%,10%{ background: #ec5766; -webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%); clip-path: polygon(100% 0%, 100% 100%, 50% 50%); } 90%,100%{ background: #004260; -webkit-clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%); clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%); } } @keyframes loading-4{ 0%,10%{ background: #ec5766; -webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%); clip-path: polygon(100% 100%, 0% 100%, 50% 50%); } 90%,100%{ background: #004260; -webkit-clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%); clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%); } } @keyframes loading-5{ 0%,10%{ width: 100px; height: 100px; } 90%,100%{ width: 250px; height: 60px; } }