
Подробное описание и демонстрацией работы эффекта загрузки под номером №100 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 100
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.demo{ background: #213145; } .loader{ width: 100%; height: 250px; position: relative; } .loader span{ display: block; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #f20000; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; -webkit-animation: 5s loading-3 linear infinite; animation: 5s loading-3 linear infinite; } .loader span:before, .loader span:after{ content: ""; display: block; width: 64px; height: 64px; border-radius: 50%; border-width: 3px; border-style: solid; position: absolute; top: -3px; } .loader span:before{ border-color: #17cff7; left: -70px; -webkit-animation: 5s loading-1 ease-in-out infinite; animation: 5s loading-1 ease-in-out infinite; } .loader span:after{ border-color: #00e865; right: -70px; -webkit-animation: 5s loading-2 ease-in-out infinite; animation: 5s loading-2 ease-in-out infinite; } @-webkit-keyframes loading-1{ 50% { left:70px; } } @keyframes loading-1{ 50% { left:70px; } } @-webkit-keyframes loading-2{ 50% { right:70px; } } @keyframes loading-2{ 50% { right:70px; } } @-webkit-keyframes loading-3{ 20%{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } 40%{ -webkit-transform:rotate(180deg); transform:rotate(180deg); } 60%{ -webkit-transform:rotate(-180deg);transform:rotate(-180deg); } 80%{ -webkit-transform:rotateY(-180deg);transform:rotateY(-180deg); } } @keyframes loading-3{ 20%{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } 40%{ -webkit-transform:rotate(180deg); transform:rotate(180deg); } 60%{ -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 80%{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } }