https://github.com/redsift/d3-rs-progress
Animated progress indicator as a reusable chart.
https://github.com/redsift/d3-rs-progress
animation d3 d3v4 icon
Last synced: 4 months ago
JSON representation
Animated progress indicator as a reusable chart.
- Host: GitHub
- URL: https://github.com/redsift/d3-rs-progress
- Owner: redsift
- License: mit
- Created: 2017-02-03T11:44:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-03-16T14:58:10.000Z (about 2 years ago)
- Last Synced: 2025-09-27T22:52:21.729Z (9 months ago)
- Topics: animation, d3, d3v4, icon
- Language: HTML
- Homepage:
- Size: 2.51 MB
- Stars: 2
- Watchers: 18
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-rs-progress
[](https://circleci.com/gh/redsift/d3-rs-progress)
[](https://www.npmjs.com/package/@redsift/d3-rs-progress)
[](https://raw.githubusercontent.com/redsift/d3-rs-progress/master/LICENSE)
`d3-rs-progress` presents a progress indicator.
## Example
### Show / Hide
[View @redsift/d3-rs-progress on Codepen](http://codepen.io/rahulpowar/pen/zNRrEL)
### Custom Icon
[View @redsift/d3-rs-progress on Codepen](http://codepen.io/rahulpowar/pen/PWeJEG)
## Usage
```bash
npm i @redsift/d3-rs-progress
```
### Browser
```javascript
var hide = d3_rs_geo.show('#parent');
setTimeout(() => {
hide().then(() => console.log('hidden'))
}, 1000);
```
### ES6
```javascript
import { show } from "@redsift/d3-rs-progress";
let hide = show('#parent');
...
```
### Require
```javascript
var progress = require("@redsift/d3-rs-progress");
var hide = progress.show();
...
```
## API
The helper function `show(location, icon)` creates an SVG and animates it till the caller hides the icon.
Parameter|Detail
---------|------
`location`|Optional, defaults to body *String, D3 Selection* CSS selection where the icon should be injected.
`icon`|Optional, defaults to the standard size *Reusable* Chart to render as the animated Icon.
Returns |Detail
----------|------
`function()`|Function to call to hide the icon. A call to the hide function returns a Promise that will resolve when the hide animation is finished.
## Icon
You may optionally supply an icon to `show()` that customizes the apperance of the animated icon or render it yourself as a standard reusable chart.
### Parameters
Property|Description|Transition
----|-----------|----------|-------
`classed`|*String* SVG custom class|N
`width`, `height`, `size`|*Integer* SVG container sizes|Y
`scale`|*Float* SVG container scale|Y
`zoom`|*Float* Zoom on the elements inside the SVG|Y
`inset`|*Float* Pixel inset of the arc|N
`rotation`|*Float* Degree rotation of the arc|Y
`angle`|*Float* Radian size of the arc|Y
`icon`|*Float* Scale of the internal icon|Y
`colors`|*String*, *String* Background color string and foreground color string, if used both required. **Note this will add a border to icon**| N
`border`|*Boolean* Adds border to icon and keeps center solid. **If colors used this will default to true** | N