UNPKG

859 BSCSSView Raw
1.placeholder {
2 display: inline-block;
3 min-height: 1em;
4 vertical-align: middle;
5 cursor: wait;
6 background-color: currentColor;
7 opacity: $placeholder-opacity-max;
8
9 &.btn::before {
10 display: inline-block;
11 content: "";
12 }
13}
14
15// Sizing
16.placeholder-xs {
17 min-height: .6em;
18}
19
20.placeholder-sm {
21 min-height: .8em;
22}
23
24.placeholder-lg {
25 min-height: 1.2em;
26}
27
28// Animation
29.placeholder-glow {
30 .placeholder {
31 animation: placeholder-glow 2s ease-in-out infinite;
32 }
33}
34
35@keyframes placeholder-glow {
36 50% {
37 opacity: $placeholder-opacity-min;
38 }
39}
40
41.placeholder-wave {
42 mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
43 mask-size: 200% 100%;
44 animation: placeholder-wave 2s linear infinite;
45}
46
47@keyframes placeholder-wave {
48 100% {
49 mask-position: -200% 0%;
50 }
51}