
Подробное описание и демонстрацией работы эффекта загрузки под номером №177 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 177
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #0a2e36; } .loader{ width: 195px; height: 195px; margin: 0 auto 30px; position: relative; perspective: 195px; transform-type: preserve-3d; } .loader .loader-inner{ width: 117px; height: 117px; border-radius: 97px; border: 39px outset #dd0223; margin: -58px 0 0 -58px; position: absolute; top: 50%; left: 50%; transform-type: preserve-3d; transform-origin: 50% 50%; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); animation: loading-1 1150ms cubic-bezier(.49,.06,.43,.85) infinite; } .loader .loader-inner:nth-child(2){ width: 136px; height: 136px; border-width: 29px; border-color: #ffba08; margin: -68px 0 0 -68px; box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); animation-name: loading-2; animation-delay: 86.25ms; } .loader .loader-inner:nth-child(3){ width: 156px; height: 156px; border-width: 19px; border-color: #27fb6b; margin: -78px 0 0 -78px; box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); animation-name: loading-3; animation-delay: 172.5ms; } @keyframes loading-1{ 0%{ border-color: #dd0223; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } 50%{ border-color: #dd0223; transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 100%{ border-color: #dd0223; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } } @keyframes loading-2{ 0%{ border-color: #ffba08; box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } 50%{ border-color: #ffba08; box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.8); transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 100%{ border-color: #ffba08; box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } } @keyframes loading-3{ 0%{ border-color: #27fb6b; box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } 50%{ border-color: #27fb6b; box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 100%{ border-color: #27fb6b; box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px); } }