Pd-Skeleteon-Loader

[d3orn]

Low Prio

We have a skeleton loader in our own library but it would make sense to move it over to your library

Two props (width and height)

CSS

@keyframes cp-skeleton-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.cp-skeleton-animation {
  animation: cp-skeleton-animation 1.2s infinite;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-100%);
  z-index: 1;
  background: linear-gradient(
                  90deg,
                  rgba($white, 0),
                  rgba($white, 0.4),
                  rgba($white, 0)
  );
}

.cp-skeleton-loader {
  display: flex;
  height: v-bind(height);
  width: v-bind(width);
  position: relative;
  overflow: hidden;

  background-color: $gray-3;
  border-radius: 4px;
}

HTML

  <div class="cp-skeleton-loader">
    <div class="cp-skeleton-animation" />
  </div>

It is just some fancy css with a pretty simple HTML Template :)

[tom-wenger]

i see you use v-bind here for the width and height. how should i implement this?

1. with a property like <pd-skeleton-loader height="2rem" width="20rem">
2. or should i set it to 100% so you can control it width the parent elements?

[d3orn]

I would prefer props, currently we have height with a default of 32px and width as a required property

[tom-wenger]

Ready to test in v3.0.8