Подробное описание и демонстрацией работы эффекта загрузки под номером №170 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 170
<div class="loader"> <div class="loader-inner"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 100px; height: 130px; margin: 50px auto; position: relative; } .loader .loader-inner{ width: 60px; height: 60px; border-radius: 50% 0 50% 50%; box-shadow: 0 0 0 4px #0a6f6d, 0 0 0 8px #14b0ad, -3px -3px 3px 8px rgba(0, 0, 0, 0.25); margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; transform: rotate(135deg); } .loader .loader-inner:before{ content: ""; display: block; border-radius: 50% 0 50% 50%; background-image: repeating-linear-gradient(45deg, #086a69 0, #086a69 9px, transparent 10px, transparent 19px); background-position: center center; background-size: 100% 100%; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; animation: loading-1 1s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite; } .loader .loader-inner:after{ content: ""; width: 16px; height: 16px; border-radius: 50%; background: #086a69; box-shadow: inset -0 -4px 0 #14b0ad, -3px -3px 3px rgba(0, 0, 0, 0.25); position: absolute; bottom: 90%; left: 90%; z-index: -2; animation: loading-2 3s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards; } @keyframes loading-1{ from{ background-size: 200% 200%; } to{ background-size: 141% 141%; } } @keyframes loading-2{ 0%{ width: 1px; height: 1px; border-radius: 50px; opacity: 1; bottom: 105%; left: 105%; } 70%{ width: 16px; height: 16px; border-radius: 96px 96px 96px 0; opacity: 1; bottom: 120%; left: 120%; } 80%{ border-radius: 48px 96px; opacity: 1; bottom: 130%; left: 130%; } 94%{ border-radius: 32px 96px; opacity: 1; bottom: 150%; left: 150%; } 100%{ border-radius: 8px 96px; opacity: 0; bottom: 150%; left: 150%; } }