Progress Circle

A simple lightweight circle progress web component with zero dependencies. It's easy to use anywhere you want. For example in Angular, React, Vue, Ionic or vanilla HTML/JS etc.

Demo

Features

• Indeterminate progress state. Shown as loading circle.
• Use of predefined colors (info, success, warning, danger), custom or inherited.
• Responsive size. Contains the parent size.
• No forced styles. Only limited by your creativity. See demos.

Getting Started

Either via NPM:

npm i ui-progress-circle

import 'ui-progress-circle';

or CDN:

<script
  type="module"
  src="https://unpkg.com/ui-progress-circle@latest/dist/ui-progress-circle/ui-progress-circle.esm.js"
></script>
<script
  nomodule=""
  src="https://unpkg.com/ui-progress-circle@latest/dist/ui-progress-circle/ui-progress-circle.js"
></script>

Usage

See docs

Some examples:

<ui-progress-circle></ui-progress-circle>
<ui-progress-circle value="67"></ui-progress-circle>
<ui-progress-circle value="100" color="success"></ui-progress-circle>
<ui-progress-circle value="33" stroke="100"></ui-progress-circle>
<ui-progress-circle shape="round" color="#2266DD" radius="90"></ui-progress-circle>
<ui-progress-circle value="42" class="no-animation"></ui-progress-circle>

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-progress-circle/loader';
/* ... */
defineCustomElements();

Other

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

License

(C) Copyright 2020 - 2021 Domink Geng - MIT GitHub