wix-storybook-utils/src/SkeletonRectangle/SkeletonRectangle.st.css

Utilities for automated component documentation within Storybook

:import {
  -st-from: '../Foundation/colors.st.css';
  -st-named: D80;
}

@keyframes wave {
  0% {
    left: -200px;
  }
  
  100% {
    left: 100%;
  }
}

.root {
  position: relative;
  width: 100%;
  background-color: rgba(122, 146, 165, 0.20);
  border-radius: 6px;
}

.animator {
  position: absolute;
  left: -200px;
  top: 0;
  height: 100%;
  width: 200px;
  background: linear-gradient(to right, transparent 0%,  value(D80) 40%, value(D80) 60%, transparent 100%);
  animation: wave 1s ease 0.5s infinite;
  opacity: 0.2;
}