Preloader для сайта — стиль 218

Подробное описание и демонстрацией работы эффекта загрузки под номером №218 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки тсраницы

<div class="preloader">
<div class="loader"></div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.preloader{
height: 100px;
width: 100px;
margin: 30px auto 0;
position: relative;
}
.loader{
background-color: #fff;
width: 5px;
height: 5px;
border-radius: 50px;
position: relative;
top: calc(50% - 2.5px);
left: calc(50% - 2.5px);
}
.loader:before,
.loader:after{
content: "";
background: linear-gradient(45deg,transparent,rgba(255, 255, 255, .3),rgba(255, 255, 255, .3),transparent);
width: 50px;
height: 50px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-radius: 0 50px 0px 0;
transform-origin:  0% 100%;
position: absolute;
top: -47px;
animation: loader 1s linear infinite;
}
.loader:after{
border-top: none;
border-right: none;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
border-radius: 0 0px 0px  50px;
transform-origin:  100% 0%;
top: 2px;
right: 2px;
}
@keyframes loader{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}

Теги: