Loader анимация из Битрикс24
Заглушка с анимацией загрузки для блока в котором с задержкой подгружается контентLoader анимация из Битрикс24
Заглушка с анимацией загрузки для блока в котором с задержкой подгружается контент
📅 30 марта 2023
👁🗨 538
Наверняка многие верстальщики которые работали с Битрикс24 или может не работали но искали какую-то заглушку или прелоадер для своих блоков, также как и я не могли найти, что-то подходящее и анимированное на чистом css. Я отловил эту анимацию при очередной перезагрузке своей срм, чтобы установить себе на блок где загружается реклама от Яндекса и поделиться ею с вами.
<div class="loader">
<svg class="loader__svg" viewBox="25 25 50 50">
<circle class="loader__svg-circle" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
</svg>
</div>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
width: 110px;
height: 110px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%)
}
.loader__svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center
}
.loader__svg-circle {
stroke: #bfc3c8;
stroke-width: 1.5;
stroke-dasharray: 20,200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite;
stroke-linecap: round
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124px
}
}
@keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124px
}
}
</style>