@keyframes skeleton-rectangle-rtl {
100% {
background-position: 0% 0%;
}
50% {
background-position: 50% 50%;
}
0% {
background-position: 100% 100%;
}
}
@mixin skeleton-loader($angleDeg: 90) {
animation: skeleton-rectangle-rtl 2s linear infinite;
animation-timing-function: linear;
background-image: linear-gradient(
($angleDeg) + deg,
var(--loading-patterns-skeleton-base) 30%,
var(--loading-patterns-skeleton-shine) 50%,
var(--loading-patterns-skeleton-base) 70%
);
background-color: var(--loading-patterns-skeleton-base);
background-size: 400%;
}
@mixin skeleton-loader-dark($angleDeg: 90) {
@include skeleton-loader($angleDeg);
background-color: var(--gray-500);
background-image: linear-gradient(
($angleDeg) + deg,
var(--gray-500) 30%,
var(--gray-800) 50%,
var(--gray-500) 70%
);
}
@mixin skeleton-loader-element($width: 100%, $height: 20px) {
height: $height;
overflow: hidden;
width: $width;
@include skeleton-loader;
}
@mixin skeleton-loader-element-square($size: 40px) {
border-radius: 3px;
@include skeleton-loader-element($size, $size);
@include skeleton-loader(135);
}
@mixin skeleton-loader-vertical() {
display: flex;
flex-direction: column;
}
@mixin skeleton-loader-horizontal() {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.SkeletonLoader {
width: 100%;
@include skeleton-loader-vertical;
&-item {
flex: 1;
}
&-horizontal {
@include skeleton-loader-horizontal;
.SkeletonLoader-item:not(:first-child) {
margin-left: 4px;
}
}
&-vertical {
@include skeleton-loader-vertical;
.SkeletonLoader-item:not(:first-child) {
margin-top: 4px;
}
}
&-line {
border-radius: 3px;
@include skeleton-loader-element;
}
&-square {
@include skeleton-loader-element-square;
}
&-circle {
@include skeleton-loader-element-square(32px);
border-radius: 50%;
width: 32px;
}
&-rounded {
@include skeleton-loader-element(100px, 24px);
border-radius: 12px;
}
&-columnChart {
mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
aspect-ratio: 81/100;
@include skeleton-loader;
}
&-barChart {
mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
aspect-ratio: 125/80;
@include skeleton-loader;
}
&-pieChart {
mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
aspect-ratio: 100/100;
@include skeleton-loader;
}
&-lineChart {
mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
aspect-ratio: 120/91;
@include skeleton-loader;
}
&-unifiedChart {
mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
aspect-ratio: 130/87;
@include skeleton-loader;
}
}