arc-counter | native canvas javascript plugin for counting to a number
kandi X-RAY | arc-counter Summary
kandi X-RAY | arc-counter Summary
arc-counter is a JavaScript library. arc-counter has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.
A native canvas javascript plugin for counting to a number with an animated arc around the number.
A native canvas javascript plugin for counting to a number with an animated arc around the number.
Support
Quality
Security
License
Reuse
Support
arc-counter has a low active ecosystem.
It has 1 star(s) with 1 fork(s). There are 1 watchers for this library.
It had no major release in the last 6 months.
arc-counter has no issues reported. There are no pull requests.
It has a neutral sentiment in the developer community.
The latest version of arc-counter is current.
Quality
arc-counter has no bugs reported.
Security
arc-counter has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
License
arc-counter does not have a standard license declared.
Check the repository for any license declaration and review the terms closely.
Without a license, all rights are reserved, and you cannot use the library in your applications.
Reuse
arc-counter releases are not available. You will need to build from source code and install.
Installation instructions, examples and code snippets are available.
Top functions reviewed by kandi - BETA
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of arc-counter
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of arc-counter
arc-counter Key Features
No Key Features are available at this moment for arc-counter.
arc-counter Examples and Code Snippets
No Code Snippets are available at this moment for arc-counter.
Community Discussions
No Community Discussions are available at this moment for arc-counter.Refer to stack overflow page for discussions.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install arc-counter
Add the script and css file to your page. The css is not necessary, but it will leave placeholders for your counters while the page is loading. Otherwise the counters will be have 0 height and then get a height after the counter load, causing the page to jerk a little bit. It's best to add the script to the footer since there is no document ready function in it. Then the most basic way to get started is to add the ArcCounter call after you've included the js file. Now we will add the html for the counters. Most of the data for the counters come from these data attributes. But, there are also some attributes you can add to the ArcCounter initialization that will be applied to all the counter.
data-number: is the number that is being counted to.
data-max: is the maximum number represented by the counter. This is used to determine how far the arc around the counter should go.
data-text: is the text that will be displayed below the counter.
data-background: is the entire background color of the canvas, but by default the canvas is transparent so you can just color the containing element however you'd like and the canvas will show that.
selector: is the css selector for your counters. If you change this you can change the css to reflect your counter class. Or omit the css either will work.
strokeColor: is the color of the arc
fillColor: is the color of the circle behind the arc
textColor: is the color of the text inside the circle
fontFace: is the font you wish to use for the counter and text
duration: is how long it takes for the counter to finish counting
easingFunction: is the function you want to use when drawing the arc. All the easing functions come from this gist Easing Functions so you can use any function name from that gist.
responsive: if true will attache a resize event to the window so the arcs are always 100% of their container.
onlyAnimateOnVisible: if set to true the counters will only start their animation when they are scolled into view.
data-number: is the number that is being counted to.
data-max: is the maximum number represented by the counter. This is used to determine how far the arc around the counter should go.
data-text: is the text that will be displayed below the counter.
data-background: is the entire background color of the canvas, but by default the canvas is transparent so you can just color the containing element however you'd like and the canvas will show that.
selector: is the css selector for your counters. If you change this you can change the css to reflect your counter class. Or omit the css either will work.
strokeColor: is the color of the arc
fillColor: is the color of the circle behind the arc
textColor: is the color of the text inside the circle
fontFace: is the font you wish to use for the counter and text
duration: is how long it takes for the counter to finish counting
easingFunction: is the function you want to use when drawing the arc. All the easing functions come from this gist Easing Functions so you can use any function name from that gist.
responsive: if true will attache a resize event to the window so the arcs are always 100% of their container.
onlyAnimateOnVisible: if set to true the counters will only start their animation when they are scolled into view.
Support
For any new features, suggestions and bugs create an issue on GitHub.
If you have any questions check and ask questions on community page Stack Overflow .
Find more information at:
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
