Circle Progress Web Component
npm install ui-progress-circle[![Version][version]][package]
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.

- 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][demos].
Either via [NPM][package]:
``bash`
npm i ui-progress-circle
`ts`
import 'ui-progress-circle';
or CDN:
`html`
type="module"
src="https://unpkg.com/ui-progress-circle@latest/dist/ui-progress-circle/ui-progress-circle.esm.js"
>
nomodule=""
src="https://unpkg.com/ui-progress-circle@latest/dist/ui-progress-circle/ui-progress-circle.js"
>
[See docs][github-docs]
Some examples:
`html`
See [demo][demos] page for style ideas.
Angular must be configured to allow custom elements.
app.module.ts
`ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
/ ... /
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
`
main.ts
`ts``
import { defineCustomElements } from 'ui-progress-circle/loader';
/ ... /
defineCustomElements();
Search the web for "how to use web components in your framework".



(C) Copyright 2020 - 2021 Domink Geng - MIT [GitHub][github]
[version]: https://img.shields.io/npm/v/ui-progress-circle.svg?style=flat-square
[package]: https://www.npmjs.com/package/ui-progress-circle
[demos]: https://domske.github.io/ui-progress-circle-demo/
[github]: https://github.com/domske/ui-progress-circle
[github-docs]: https://github.com/domske/ui-progress-circle/tree/master/src/components/progress-circle