@codog/vue3-infinite-loading
Version:
An infinite scroll plugin for Vue.js
60 lines (59 loc) • 1.37 kB
text/less
.loading-bubbles {
@size: 1px;
@radius: 12px;
@shallow: 3px;
@c-basic: #666;
@{deep} .bubble-item {
background: @c-basic;
animation: loading-bubbles linear .75s infinite;
&:first-child {
margin-top: -@size/2 + -@radius;
margin-left: -@size/2;
}
&:nth-child(2) {
margin-top: -@size/2 + -@radius * .73;
margin-left: -@size/2 + @radius * .73;
}
&:nth-child(3) {
margin-top: -@size/2;
margin-left: -@size/2 + @radius;
}
&:nth-child(4) {
margin-top: -@size/2 + @radius * .73;
margin-left: -@size/2 + @radius * .73;
}
&:nth-child(5) {
margin-top: -@size/2 + @radius;
margin-left: -@size/2;
}
&:nth-child(6) {
margin-top: -@size/2 + @radius * .73;
margin-left: -@size/2 + -@radius * .73;
}
&:nth-child(7) {
margin-top: -@size/2;
margin-left: -@size/2 + -@radius;
}
&:last-child {
margin-top: -@size/2 + -@radius * .73;
margin-left: -@size/2 + -@radius * .73;
}
}
@keyframes loading-bubbles {
0% {
width: @size;
height: @size;
box-shadow: 0 0 0 @shallow @c-basic;
}
90% {
width: @size;
height: @size;
box-shadow: 0 0 0 0 @c-basic;
}
100% {
width: @size;
height: @size;
box-shadow: 0 0 0 @shallow @c-basic;
}
}
}