@ppci/custom-shimmer

Shimmer

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties

Installation

NPM

npm i @ppci/custom-shimmer

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/custom-shimmer'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-shimmer/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-shimmer/builds/legacy.min.js" />

<!-- Component -->
<custom-shimmer
  hideAnimation=${Boolean}
></custom-shimmer>

Styling

custom-shimmer {
  --height: 24px;
  --width: 200px;
  --animation-duration: 2s;

  /* use 50% to make a circular shimmer */
  --border-radius: 0;
}

Properties

Property	Type	Description	Possible Values
hideAnimation	Boolean	Don't show subtle highlight animation	true/false