@redsift/d3-rs-progress

Generates an animated D3v4.

Usage no npm install needed!

<script type="module">
  import redsiftD3RsProgress from 'https://cdn.skypack.dev/@redsift/d3-rs-progress';
</script>

README

d3-rs-progress

Circle CI npm MIT

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