https://github.com/teammaestro/stencil-shimmer
StencilJS component for adding shimmer UI effect to your applications.
https://github.com/teammaestro/stencil-shimmer
angular ionic shimmer stenciljs stenciljs-components web-components
Last synced: 10 months ago
JSON representation
StencilJS component for adding shimmer UI effect to your applications.
- Host: GitHub
- URL: https://github.com/teammaestro/stencil-shimmer
- Owner: TeamMaestro
- License: mit
- Created: 2018-08-14T21:07:03.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2021-03-09T16:58:19.000Z (about 5 years ago)
- Last Synced: 2025-05-19T12:52:17.524Z (11 months ago)
- Topics: angular, ionic, shimmer, stenciljs, stenciljs-components, web-components
- Language: TypeScript
- Size: 60.5 KB
- Stars: 14
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Hive StencilJS Shimmer
Web component that allows you to render shimmer UI in your web (and Ionic native) applications.
## Installation
- `npm install @teamhive/stencil-shimmer`
## Usage
- ``
### 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/@teamhive/stencil-shimmer/dist/shimmer",
"output": "./shimmer"
}
```
In your main `AppModule` (i.e. `app.module.ts`) add the following import statement:
```
import '@teamhive/stencil-shimmer/dist/shimmer';
```
### CSS Variables
|Variable|Default|
:---:|:---:
|`--box-height`|`104px`|
|`--box-width`|`100px`|
|`--line-height`|`10px`|
|`--line-width`|`100%`|
|`--line-margin-start`|`10px`|
|`--shimmer-start`|`-468px`|
|`--shimmer-end`|`-468px`|
|`--shimmer-duration`|`1s`|
|`--shimmer-timing-function`|`linear`|
|`--shimmer-iteration-count`|`infinite`|
|`--shimmer-direction`|`forwards`|
|`--background-width`|`800px`|
|`--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
[
](https://github.com/sean-perkins) |
:---:
|[Sean Perkins](https://github.com/sean-perkins)|