@skeleton-elements/vue/skeleton-effect.css

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are representations of UI that will be available (loaded) soon. They are designed to improve perceived performance.

:root {
  --skeleton-color: #ccc;
  --skeleton-icon-color: rgba(0, 0, 0, 0.25); }

.skeleton-effect-blink {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 50% top;
  mask-position: 50% top;
  -webkit-animation: skeleton-effect-blink 1s infinite;
          animation: skeleton-effect-blink 1s infinite; }

.skeleton-effect-fade {
  -webkit-animation: skeleton-effect-fade 1s infinite;
          animation: skeleton-effect-fade 1s infinite; }

.skeleton-effect-pulse {
  -webkit-animation: skeleton-effect-pulse 1s infinite;
          animation: skeleton-effect-pulse 1s infinite; }

@-webkit-keyframes skeleton-effect-fade {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

@keyframes skeleton-effect-fade {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

@-webkit-keyframes skeleton-effect-blink {
  0% {
    -webkit-mask-position: 50% top;
    mask-position: 50% top; }
  100% {
    -webkit-mask-position: -150% top;
    mask-position: -150% top; } }

@keyframes skeleton-effect-blink {
  0% {
    -webkit-mask-position: 50% top;
    mask-position: 50% top; }
  100% {
    -webkit-mask-position: -150% top;
    mask-position: -150% top; } }

@-webkit-keyframes skeleton-effect-pulse {
  0% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  50% {
    transform: scale(0.975); }
  100% {
    transform: scale(1); } }

@keyframes skeleton-effect-pulse {
  0% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  50% {
    transform: scale(0.975); }
  100% {
    transform: scale(1); } }