Gathering detailed insights and metrics for svg-progress-bar
Gathering detailed insights and metrics for svg-progress-bar
Installations
npm install svg-progress-barDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
9.10.1
NPM Version
5.8.0
Score
74.7
Supply Chain
98.5
Quality
75.8
Maintenance
100
Vulnerability
99.6
License
Releases
3
Languages
3
Vue
JavaScript
HTML
Vue (53.34%)
JavaScript (41.47%)
HTML (5.19%)
Developer
chenxuan0000
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
114 Stars
40 Commits
28 Forks
5 Watchers
1 Branches
1 Contributors
Updated on Jul 24, 2024
Maintainers
1
Package Meta Information
Latest Version
0.1.17
Package Id
svg-progress-bar@0.1.17
Unpacked Size
213.21 kB
Size
65.29 kB
File Count
21
NPM Version
5.8.0
Node Version
9.10.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
svg-progress-bar
A simple,progress bar for Vue.js
🐾online demo | 🌾 simple demo | 📘 Chinese Document
Browser support
 IE |  Firefox |  Chrome |  Safari |  iOS |  Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
What is svg-progress-bar？
svg-progress-bar is a based on circles of the secondary development of project vue components
Features
- zero dependence, small volume.
- currently supports loop/rectangle progress bar.
- the configuration meets a variety of requirements.
- ongoing maintenance
Installation
NPM
1npm install svg-progress-bar --save
Usage
ES6
Specific reference example-src/App.vue
1// **main.js** 2import Vue from 'vue' 3import svg from 'svg-progress-bar' 4// you can set componentName default componentName is svg-progress-bar 5Vue.use(svg,{componentName: 'percent-bar'}) 6// 1.global install 7import Vue from 'vue' 8import svg from 'svg-progress-bar' 9// you can set custom componentName 10Vue.use(svg,{componentName: 'percent-bar'}) 11 12// 2.single .vue file install 13<script> 14 import svg from 'svg-progress-bar' 15 export default { 16 components: { 17 svg 18 } 19 } 20</script>
s
normal use (script tag)
Example:
Specific reference test/test.html
1<html> 2<head> 3 ... 4</head> 5<body> 6 <div id="app"> 7 <svg-progress-bar></svg-progress-bar> 8 </div> 9 <script src="vue.js"></script> 10 <script src="svg-progress-bar"></script> 11 <script> 12 new Vue({ 13 el: '#app' 14 }) 15 </script> 16</body> 17</html>
Configure list
| key | description | default | val |
|---|---|---|---|
type | type of the progress bar | 'circle' | 'circle' 'rect' |
value | value of the progress bar | 0 | Number String |
valAddCalBack | valAddCalBack of the progress bar | [] | [{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}] |
options | options of the progress bar | {} | Object |
options.valRate | value add Rate of the circle progress bar(suggest <= 1) | 1 | Number |
options.radius | radius of the circle progress bar | 50 | Number |
options.circleWidth | stokeWidth of the circle progress bar | 10 | Number |
options.varyStrokeArray | varyStrokeArray of the circle progress bar if you want wide ranging | null | Array |
options.circleLinecap | circleLinecap of the circle progress bar | '' | 'round','' |
options.maxValue | maxValue of the progress bar | 100 | Number |
options.text | text of the progress bar | function (value) {return this.htmlifyNumber(value)} | Function |
options.textColor | text color of the progress bar | #000 | color |
options.pathColors | pathColors of the progress bar | ['#EEE', '#F00'] | Array |
options.gradientColor | gradientColor of the progress bar | null | Array |
options.gradientOpacity | gradientOpacity of the progress bar | [1,1] | Array |
options.duration | duration of the progress bar | 500 | Number |
options.rectWidth | rectWidth of the rect progress bar | 400 | Number |
options.rectHeight | rectHeight of the rect progress bar | 40 | Number |
options.rectRadius | rectRadius of the rect progress bar | 0 | Number |
Changelog
See the GitHub release history.
License
svg-progress-bar is open source and released under the MIT License.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
3
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More