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.
- 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.
Either via NPM:
npm i ui-water-jar
import 'ui-water-jar';
or CDN:
<script type="module" src="https://unpkg.com/ui-water-jar@latest/dist/ui-water-jar/ui-water-jar.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ui-water-jar@latest/dist/ui-water-jar/ui-water-jar.js"></script>
Some examples:
<ui-water-jar value="67"></ui-water-jar>
<ui-water-jar value="42" color="#c0392b" shape="rect"></ui-water-jar>
See demo page for style ideas.
Angular must be configured to allow custom elements.
app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
/* ... */
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
main.ts
import { defineCustomElements } from 'ui-water-jar/loader';
/* ... */
defineCustomElements();
Search the web for "how to use web components in your framework".