All Projects → TeamHive → stencil-shimmer

TeamHive / stencil-shimmer

Licence: MIT license
StencilJS component for adding shimmer UI effect to your applications.

Programming Languages

typescript
32286 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to stencil-shimmer

pdf-viewer
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Stars: ✭ 65 (+364.29%)
Mutual labels:  ionic, stenciljs, stenciljs-components
ionic-custom-components
🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.
Stars: ✭ 30 (+114.29%)
Mutual labels:  ionic, web-components, stenciljs
placeholders
SVG-based placeholders in web components
Stars: ✭ 28 (+100%)
Mutual labels:  web-components, stenciljs, stenciljs-components
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+13671.43%)
Mutual labels:  web-components, stenciljs
design-system
The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.
Stars: ✭ 40 (+185.71%)
Mutual labels:  web-components, stenciljs
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (+21.43%)
Mutual labels:  web-components, stenciljs
Ionic Pwa Toolkit
Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).
Stars: ✭ 629 (+4392.86%)
Mutual labels:  ionic, web-components
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+70471.43%)
Mutual labels:  ionic, stenciljs
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
Stars: ✭ 152 (+985.71%)
Mutual labels:  ionic, web-components
Ionicons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Stars: ✭ 15,802 (+112771.43%)
Mutual labels:  ionic, stenciljs
block-photos
A photos app built with Ionic and Blockstack as backend.
Stars: ✭ 24 (+71.43%)
Mutual labels:  ionic, stenciljs
app-starter
Angular mono-repo (Ionic/Capacitor/StencilJS/Web Component) app starter for supporting cross platform apps.
Stars: ✭ 75 (+435.71%)
Mutual labels:  ionic, stenciljs
frosted-glass
❄️ Add a live frosted glass blur effect over any type of web content, including text.
Stars: ✭ 62 (+342.86%)
Mutual labels:  web-components, stenciljs
bulmil
💄 A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Stars: ✭ 121 (+764.29%)
Mutual labels:  stenciljs, stenciljs-components
capacitor-site
Capacitor website
Stars: ✭ 0 (-100%)
Mutual labels:  ionic, stenciljs
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+327057.14%)
Mutual labels:  ionic, stenciljs
corejam
A scaffolding for building progressive GraphQL powered jamstack applications.
Stars: ✭ 24 (+71.43%)
Mutual labels:  web-components, stenciljs
Shadow-DOM-inject-styles
🎉 A helper function to easily modify Shadow DOM CSS.
Stars: ✭ 47 (+235.71%)
Mutual labels:  web-components, stenciljs
ionic-login-component
Free sample of Premium Ionic Login Component
Stars: ✭ 17 (+21.43%)
Mutual labels:  ionic
wc-context
Context for Web Components
Stars: ✭ 26 (+85.71%)
Mutual labels:  web-components

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

  • <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/@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

Sean Perkins
Sean Perkins
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].