Water Jar
A lightweight water jar progress web component. It's easy to use anywhere you want. For example in Angular, React, Vue, Ionic or vanilla HTML/JS etc.
Demo
Features
- Responsive size. Fits the parent in width and height.
- Custom colors and different shapes.
- Vector based (SVG)
- Smooth animation / transitions.
- Use it as a water jar, battery indicator, or wine bottle, etc.
Getting Started
Either via NPM:
npm i ui-water-jar
;
or CDN:
Usage
Some examples:
See demo page for style ideas.
Angular
Angular must be configured to allow custom elements.
app.module.ts
;
main.ts
;/* ... */defineCustomElements;
Other
Search the web for "how to use web components in your framework".