0.4.0 • Published 9 months ago
@redsift/d3-rs-progress v0.4.0
d3-rs-progress
d3-rs-progress
presents a progress indicator.
Example
Show / Hide
View @redsift/d3-rs-progress on Codepen
Custom Icon
View @redsift/d3-rs-progress on Codepen
Usage
npm i @redsift/d3-rs-progress
Browser
<script src="//static.redsift.io/reusable/d3-rs-progress/latest/d3-rs-progress.umd-es2015.min.js">
</script>
<script>
var hide = d3_rs_geo.show('#parent');
setTimeout(() => {
hide().then(() => console.log('hidden'))
}, 1000);
</script>
ES6
import { show } from "@redsift/d3-rs-progress";
let hide = show('#parent');
...
Require
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 |