@pluginjs/svg-progress

0.8.11 • Public • Published

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 / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
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) 2022 Creation Studio Limited.

Readme

Keywords

none

Package Sidebar

Install

npm i @pluginjs/svg-progress

Homepage

pluginjs.com

Weekly Downloads

2

Version

0.8.11

License

GPL-3.0

Unpacked Size

116 kB

Total Files

22

Last publish

Collaborators

  • thecreation
  • kaptinlin