@vortech-digital-pioneers/vtc-skeleton

A component for usage in skeleton screens with the option to enable or disable skeleton animation.

Usage no npm install needed!

<script type="module">
  import vortechDigitalPioneersVtcSkeleton from 'https://cdn.skypack.dev/@vortech-digital-pioneers/vtc-skeleton';
</script>

README

Built With Stencil

vtc-skeleton

Properties

Property Attribute Description Type Default
animated animated Enables or disables animation of the skeleton element boolean false
height height The height of the skeleton element string '15px'
width width The width of the skeleton element string '100%'

CSS Custom Properties

Name Description
--background Background of the skeleton element
--border-radius Border radius can be adjusted for e.g. round avatars
--ghost-color Color of the accent used for the shimmer

Using this component

Script tag

  • Publish to NPM
  • Put a script tag similar to this <script src='https://unpkg.com/vtc-skeletont@1.0.3/dist/vtc-skeleton.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install vtc-skeleton --save
  • Put a script tag similar to this <script src='node_modules/vtc-skeleton/dist/vtc-skeleton.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install vtc-skeleton --save
  • Add an import to the npm packages import vtc-skeleton;
  • Then you can use the element anywhere in your template, JSX, html etc

Built with StencilJS