Package Exports

ui-progress-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ui-progress-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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".

ui-progress-circle