vuestic-ui/dist/esm-node/VaSkeleton.css

Vue 3 UI Framework

:root,
:host {
  --va-skeleton-wave-color: rgb(100, 100, 100);
  --va-skeleton-wave-opacity: 0.2;
  --va-skeleton-border-radius: unset;
  --va-skeleton-animation-duration: 2.5s;
}
@keyframes pulse {
0% {
    filter: brightness(1);
}
50% {
    filter: brightness(1);
}
75% {
    filter: brightness(0.9);
}
100% {
    filter: brightness(1);
}
}
@keyframes wave {
0% {
    left: -100%;
}
100% {
    left: 100%;
}
}
.va-skeleton {
  background: var(--va-color-computed);
  height: var(--va-height-computed);
  width: var(--va-width-computed);
  border-radius: var(--va-border-radius);
  cursor: wait;
}
.va-skeleton--pulse {
  animation: var(--va-skeleton-animation-duration) ease-in-out 0s infinite normal none running pulse;
}
.va-skeleton--wave {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: -webkit-radial-gradient(white, black);
}
.va-skeleton--wave .va-skeleton__wave {
  position: absolute;
  overflow: hidden;
  left: 0;
  height: 100%;
  width: 100%;
}
.va-skeleton--wave .va-skeleton__wave::after {
  display: block;
  position: relative;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: var(--va-skeleton-wave-opacity, 0.5);
  background: linear-gradient(90deg, transparent, var(--va-skeleton-wave-color), transparent);
  animation: var(--va-skeleton-animation-duration) linear 0s infinite normal none running wave;
}
.va-skeleton--hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.va-skeleton--lines {
  background: repeating-linear-gradient(180deg, var(--va-color-computed), var(--va-color-computed) calc(1em - var(--va-line-gap) / 2), transparent calc(1em - var(--va-line-gap) / 2), transparent 1em);
}
.va-skeleton--lines .va-skeleton__wave::after {
  -webkit-mask-image: repeating-linear-gradient(180deg, black, black calc(1em - var(--va-line-gap) / 2), transparent calc(1em - var(--va-line-gap) / 2), transparent 1em);
          mask-image: repeating-linear-gradient(180deg, black, black calc(1em - var(--va-line-gap) / 2), transparent calc(1em - var(--va-line-gap) / 2), transparent 1em);
}
.va-skeleton--text {
  width: 100%;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, var(--va-last-line-width) 100%, var(--va-last-line-width) calc(100% - 1em), 100% calc(100% - 1em), 100% 100%, 1em 100%, var(--va-last-line-width) 100%, 100% 100%, 100% 0%);
          clip-path: polygon(0% 0%, 0% 100%, var(--va-last-line-width) 100%, var(--va-last-line-width) calc(100% - 1em), 100% calc(100% - 1em), 100% 100%, 1em 100%, var(--va-last-line-width) 100%, 100% 100%, 100% 0%);
}
.va-skeleton--circle {
  min-width: var(--va-width-computed);
  min-height: var(--va-height-computed);
}