@pluginjs/svg-progress

A flexible modern svg-progress js plugin.

Stats

StarsIssuesVersionUpdatedCreatedSize
@pluginjs/svg-progress
1000.8.82 months ago4 years agoMinified + gzip package size for @pluginjs/svg-progress in KB

Readme

SvgProgress

npm package

A flexible modern svg-progress js plugin.

Samples

Introduction

Installation

Yarn

yarn add @pluginjs/svg-progress

NPM

npm i @pluginjs/svg-progress

Getting Started

CDN:

Development:

<script src="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.css">

Production:

<script src="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.min.css">

Initialize

HTML:

<div class="element"></div>

ECMAScript Module:

import SvgProgress from "@pluginjs/svg-progress"
import "@pluginjs/svg-progress/dist/svg-progress.css"

SvgProgress.of(document.querySelector('.element'), options)

CommonJS:

require("@pluginjs/svg-progress/dist/svg-progress.css")
const SvgProgress = require("@pluginjs/svg-progress")

SvgProgress.of(document.querySelector('.element'), options)

Browser:

<link rel="stylesheet" href="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.css">
<script src="https://unpkg.com/@pluginjs/svg-progress/dist/svg-progress.js"></script>
<script>
  Pj.svgProgress('.element', options)
</script>

API

Options

Options are called on svgProgress instances through the svgProgress options itself. You can also save the instances to variable for further use.

Name Description Default
"theme" Add plugin theme option null
"min" Set min value 0
"max" Set max value 100
"goal" Set goal value 100
"size" Set size value 80
"speed" Set progress speed value 15
"barcolor" Set progress bar color #55a4f2
"barsize" Set progress bar size 4
"trackcolor" Set track bar color #f7f9fc
"fillcolor" Set fill color (default none) none
"easing" Set easing animation ease
"numberCallback" Set number call back function function() {...}
"contentCallback" Set content call back function null

Events

Events are called on svgProgress instances through the svgProgress events itself. You can also save the instances to variable for further use.

Name Description
"update" Gets fired when plugin is destroy
"ready" Gets fired when plugin is ready
"destroy" Gets fired when plugin is destroy
"start" Gets fired when plugin has start
"go" Gets fired when plugin has goes
"reset" Gets fired when plugin has be reset
"stop" Gets fired when progress has stop
"finish" Gets fired when plugin has finish
"enable" Gets fired when plugin is enabled
"disable" Gets fired when plugin is disabled

Methods

Methods are called on svgProgress instances through the svgProgress method itself. You can also save the instances to variable for further use.

Name Description
"get" Get value by key
"start" Start to progress
"finish" Finish progress
"stop" Stop progress
"reset" Reset progress
"go" Go the specified progress by value
"disable" Disable plugin
"enable" Enabled plugin if plugin is disabled
"destroy" Destroy plugin

Classes

Name | Description | Default --|| "NAMESPACE" | Declare plugin namespace | pj-svgProgress "THEME" | Declare plugin theme | {namespace}--{theme} "SVG" | Declare svg node | {namespace}-svg "ELEMENT" | Declare svgProgress element | {namespace} "NUMBER" | Declare number node | {namespace}-number "CONTENT" | Declare content | {namespace}-content "DISABLED" | Announce plugin is disabled | {namespace}-disabled "INFOS" | Declare info | {namespace}-infos

Browser support

Tested on all major browsers.

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

License

@pluginjs/svg-progress is Licensed under the GPL-v3 license.

If you want to use @pluginjs/svg-progress project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

For purchase an Commercial License, contact us purchase@thecreation.co.

Copyright

Copyright (C) 2018 Creation Studio Limited.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.