@redsift/d3-rs-progress
v0.4.0
Published
Generates an animated D3v4.
Downloads
41
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