CSS Variables

The plugin uses CSS variables to store different values: animation speed, animation transition type, blur amount, etc...

:root {
  // background color of the main image while loading
  --progressive-image-background-color: #f8f8f8;
  
  // blur amount. Also customizable via component props
  --progressive-image-blur: 16px;
  
  // main image fade in transition easing function
  --progressive-image-main-fade-ease: ease-in;
  // main image fade in transition speed
  --progressive-image-main-fade-speed: 0.9s;
  
  // placeholder image fade in transition easing function
  --progressive-image-placeholder-fade-ease: ease-out;
  // placeholder image fade in transition speed
  --progressive-image-placeholder-fade-speed: 1.2s;

  // skeleton animation speed
  --progressive-image-skeleton-speed: 2s;
  // skeleton animation background
  --progressive-image-skeleton-background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}