Подробное описание и демонстрацией работы эффекта загрузки под номером №104 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 104
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #17bebb; } .loader{ display: flex; width: 160px; height: 160px; border-radius: 50%; background: #eee; align-items: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); justify-content: center; margin: 50px auto; position: relative; } .loader .loader-inner-1{ width: 3px; height: 48px; border-radius: 100px; background: #f74e55; position: absolute; top: 50%; transform-origin: top; -webkit-animation: loading-1 1s linear infinite; animation: loading-1 1s linear infinite; } .loader .loader-inner-2{ width: 3px; height: 32px; border-radius: 100px; background: #f74e55; position: absolute; top: 50%; transform-origin: top; -webkit-animation: loading-1 7s linear infinite; animation: loading-1 7s linear infinite; } .loader .loader-inner-3{ width: 8px; height: 8px; border-radius: 50%; background: #f74e55; margin: -2px 0 0 -2px; } @-webkit-keyframes loading-1{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }