1.0.1 • Published 6 years ago

@teammaestro/stencil-shimmer v1.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

Hive StencilJS Shimmer

Web component that allows you to render shimmer UI in your web (and Ionic native) applications.

Installation

  • npm install @teammaestro/stencil-shimmer

Usage

  • <hive-shimmer width="100%/50px/50" shape="line/box/circle"></hive-shimmer>

Angular (6+) / Ionic (4+)

In your angular.json file add the following assets matcher in your projects.app.architect.build.options.assets collection:

{
    "glob": "**/*",
    "input": "node_modules/@teammaestro/stencil-shimmer/dist/shimmer",
    "output": "./shimmer"
}

In your main AppModule (i.e. app.module.ts) add the following import statement:

import '@teammaestro/stencil-shimmer/dist/shimmer';

CSS Variables

VariableDefault
--box-height104px
--box-width100px
--line-height10px
--line-width100%
--line-margin-start10px
--shimmer-start-468px
--shimmer-end-468px
--shimmer-duration1s
--shimmer-timing-functionlinear
--shimmer-iteration-countinfinite
--shimmer-directionforwards
--background-width800px
--background--height--box-height
--shimmer-gradient-color-start#f6f7f8
--shimmer-gradient-color-end#edeef1

Development

Local Development

  • npm i
  • npm run start

Building the Stencil Component

  • npm run build
  • npm publish or npm pack for local deployments

Testing

  • npm run test

Contributors

| :---: |Sean Perkins|