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

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>

Usage

See docs

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

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();

Other

Search the web for "how to use web components in your framework".

License

(C) Copyright 2020 Domink Geng - MIT GitHub