Have ideas to improve npm?Join in the discussion! »

    ui-progress-circle
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Progress Circle

    Version

    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

    Install

    npm i ui-progress-circle

    DownloadsWeekly Downloads

    16

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    756 kB

    Total Files

    77

    Last publish

    Collaborators

    • avatar