codecheck

1
// core
2
.p-skeleton {
3
    overflow: hidden;
4
}
5

6
.p-skeleton::after {
7
    content: '';
8
    animation: p-skeleton-animation 1.2s infinite;
9
    height: 100%;
10
    left: 0;
11
    position: absolute;
12
    right: 0;
13
    top: 0;
14
    transform: translateX(-100%);
15
    z-index: 1;
16
}
17

18
.p-skeleton.p-skeleton-circle {
19
    border-radius: 50%;
20
}
21

22
.p-skeleton-none::after {
23
    animation: none;
24
}
25

26
@keyframes p-skeleton-animation {
27
    from {
28
        transform: translateX(-100%);
29
    }
30
    to {
31
        transform: translateX(100%);
32
    }
33
}
34

35
// theme
36
.p-skeleton {
37
    background-color: $skeletonBg;
38
    border-radius: $borderRadius;
39

40
    &:after {
41
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
42
    }
43
}