Native JS Circular Progress Bar (Original)

Add-ons

2026-07-26 01:10 4 次浏览 • 0 次下载 4.4KB

Native JS Circular Progress Bar (Original)

Plugin Description: An original and simple circular progress bar plugin.

Last Updated: 2020-02-25 23:26:27

<canvas id="le-canvas"></canvas>
<script>
    /**
     * This is an original plugin. Currently, only one circular progress bar can be displayed within each canvas.
     * Future updates will add support for embedding multiple circular progress bars within a single canvas.
     * The internal code uses native JS, so it can be used with the Vue framework or integrated into other frameworks.
     */
    var canvas_1 = new EnableCircle({
            id: 'le-canvas', // Element ID [Required] ID selector
            value: 80, // Percentage value [Required] 
            bgColor: '', // Background color in hexadecimal [Optional]. Transparent by default. Can be omitted when type is set to vba_color or target is specified.
            cirColor: '#e54d42', // Progress bar color in hexadecimal [Required]. Can be omitted when type is set to vba_color or target is specified.
            textColor: '#f37b1d', // Font color in hexadecimal [Required]. Can be omitted when type is set to vba_color or target is specified.
            type: 'shadow', // Style [Optional]. Default: none. Available styles: shadow (adds a shadow); vba_color (special style with the highest priority); none (no effect).
            lineCap: 'butt', // Progress bar line cap type [Optional]. Default: butt (flat); round (rounded line cap). 
            target: 'default', // Specified progress bar type [Optional]. Default: default. 
            size: 60, // Circular radius [Optional]. Default: 40.
            lineWidth: 14, // Progress bar width [Optional]. Default: 8. Maximum: 60.
            open: 'between' // Progress bar starting point [Optional]. Default: top. Available values: bottom, top, between.
        }) 
</scrtipt>