Nagging Mario's Princess

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

    2.1.0 • Public • Published

    wired progress

    wired-progress

    Hand-drawn sketchy progress bar web component.

    For demo and view the complete set of wired-elememts: wiredjs.com

    Usage

    Add wired-progress to your project:

    npm i wired-progress
    

    Import wired-progress definition into your HTML page:

    <script type="module" src="wired-progress/lib/wired-progress.js"></script>

    Or into your module script:

    import { WiredProgress } from "wired-progress"

    Use it in your web page:

    <wired-progress value="25"></wired-progress>
    <wired-progress value="10" min="5" max="15"></wired-progress>

    Properties

    value - Numeric value of the progress.

    min - Minimum value. Default is 0.

    max - Maximum value. Default is 100.

    percentage - Boolean indicating if the label should show a % symbol.

    Custom CSS Variables

    --wired-progress-label-color Color of the label. Default is black.

    --wired-progress-label-background Backgroind of label. Default is rgba(255,255,255,0.9).

    --wired-progress-font-size Font size of the label. Default is 14px

    --wired-progress-color Color of the progress bar. Default is rgba(0, 0, 200, 0.8).

    License

    MIT License (c) Preet Shihn

    Install

    npm i wired-progress

    DownloadsWeekly Downloads

    20

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    11.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • shihn