README
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 |