Cool-visual-components NPM

Cool Visual Components

This repository acts as a gallery that stores visual components like loadbards, cursors etc. for everyone to use Feel free to contribute !

Here is the Gallery if you want to check what is already done.

Table of contents:

Introduction :pizza:

All this comes from a school project. I needed an idea for an open source project so i did this repository.

It will serve as a gallery for visual components people may use later. Since it's a gallery you can also show how talented and creative you are !

Getting started :airplane:

Install cool-visual-components using your favorite package manager

# using npm
npm install cool-visual-components

# using Yarn
yarn add cool-visual-components

# using pnpm
pnpm add cool-visual-components

# using Bun
bun add cool-visual-components

Once done head to your main html file (probably index.html), and add this

<div id="yourID"></div></td>

Then require the package in your the js file you're using with your html

import { Circle } from "cool-visual-components"; //import the package
import "cool-visual-components/dist/lib/cool-visual-components.css"; //import the style

let myVar = new Circle(document.getElementById("yourID"));
myVar.draw();
myVar.changeLiquidColorOnPercentage(50);

And you're done !

You can also check the doc for other components here