Подробное описание и демонстрацией работы эффекта загрузки под номером №15 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 15
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"></div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { margin-top: 150px; position: relative; left:47%; display: block; width: 100px; height: 18px; background: #cdcdcd; border-radius: 50%; } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: #81d9fc; border-radius: 50%; opacity: 0.5; -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1); -webkit-animation: ripple 1s infinite ease-in; animation: ripple 1s infinite ease-in; } .loader:after { width: 15px; height: 15px; border-radius: 0 50% 50%; -webkit-transform: translate(-50%,-1000%) rotate(45deg); transform: translate(-50%,-1000%) rotate(45deg); -webkit-animation: drip 1s infinite ease-in; animation: drip 1s infinite ease-in; } @-webkit-keyframes ripple { 0% { -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1); opacity: 0.5; } 100% { -webkit-transform: translate(-50%,-50%) scale(2); transform: translate(-50%,-50%) scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1); opacity: 0.1; } 100% { -webkit-transform: translate(-50%,-50%) scale(2); transform: translate(-50%,-50%) scale(2); opacity: 0; } } @-webkit-keyframes drip { 0% { -webkit-transform: translate(-50%,-1000%) rotate(45deg); transform: translate(-50%,-1000%) rotate(45deg); opacity: 0; } 50% { -webkit-transform: translate(-50%,-1000%) rotate(45deg); transform: translate(-50%,-1000%) rotate(45deg); opacity: 1; } 100% { -webkit-transform: translate(-50%,0) rotate(45deg); transform: translate(-50%,0) rotate(45deg); } } @keyframes drip { 0% { -webkit-transform: translate(-50%,-1000%) rotate(45deg); transform: translate(-50%,-1000%) rotate(45deg); opacity: 0; } 50% { -webkit-transform: translate(-50%,-1000%) rotate(45deg); transform: translate(-50%,-1000%) rotate(45deg); opacity: 1; } 100% { -webkit-transform: translate(-50%,0) rotate(45deg); transform: translate(-50%,0) rotate(45deg); } }