Progress

Progress Bar

Coding

js <script defer>

import {ProgressBar} from 'gadjet/dist/module/gadjet.bundle.js';

ProgressBar.define('el-progress-bar');
ProgressBar.tagStyle({
    progressColor: 'blue',
    barColor: '#ccc',
    thickness: '5px',
    borderRadius: '5px'
})

html

<el-progress-bar></el-progress-bar>
<el-progress-bar value="0" max="100"></el-progress-bar>
<el-progress-bar value="50" max="100"></el-progress-bar>
<el-progress-bar value="100" max="100"></el-progress-bar>

Element API

propvalue

propmax

Progress Circle

Coding

js <script defer>

import { ProgressCircle } from 'gadjet/dist/module/gadjet.bundle.js';

ProgressCircle.define('el-progress-circle');
ProgressCircle.tagStyle({
    radius: 75,
    trackWidth: 25,
    trackColor: '#ccc',
    progressColor: 'blue'
})

html

<el-progress-circle></el-progress-circle>

Element API

propvalue

propmax