Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagesass
@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.skeleton-pulse {
  animation: skeleton-pulse 2s infinite both;
}

.skeleton {
  /* Setting the background-color to important so that we
    can ensure that all items in the skeleton loading state
    are consistant */
  background-color: $slightly-opaque-black !important;
  border-radius: $border-radius;
   &.min-height-20 {border-radius: 4px;
  display:  min-height: 20pxinline-block;
  }

  &.min-width-100 {line-height: 1;
    min-width: 100px100%;
  }
}

Prop/API Design for our Skeleton Component

Code Block
<Skeleton.Circle size={100} />
<Skeleton.Rect rounded height={100} width={100} />
<Skeleton.ParagraphText count={4} />
<Skeleton.Heading level="h1|h2|h3|h4|h5|h6|null" width={40} />

Zero-width non-joiner

...