progress-card v1.0.0

progress-card

This web component (highly experimental) helps you to create a custom UI component like below.

It has 3 types - Compact, Medium and Relaxed. The UI will be displayed by passing repsective parameters.

How UI looks

Usage

Include the below script and invoke the respective card type.

<script type="module" src="https://unpkg.com/progress-card"></script>

<progress-card @title="Growth Value" @percentage="5" @userName="John Dec" @color="#c823ee" @subTitle="3 key results"></progress-card>

Ex:

For type - Compact

 <progress-card @title="Growth Value" @percentage="5" @userName="John Dec" @color="#c823ee" @subTitle="3 key results"></progress-card>

For type - Medium

 <progress-card @title="Sass Industry - 2040"  @percentage="100" @type="medium" @color="#c823ee" @userName="John Dec" ></progress-card>

For type - Relaxed

<progress-card  @title="IT sector" @subTitle="3 key results" @color="#c823ee" @percentage="33" @type="relaxed" @userName="Alex volta" @userUrl="https://cdn.iconscout.com/icon/free/png-256/free-laptop-user-1-1179329.png"></progress-card>

Parameters allowed:

@title, @subTitle, @color, @percentage (Designed to show percentage only), @type, @userName, @userUrl (User's thumbnail)