Negligible Psychological Misery

    @redsift/d3-rs-progress

    0.0.5 • Public • Published

    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

    Install

    npm i @redsift/d3-rs-progress

    DownloadsWeekly Downloads

    101

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    55.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • amnonbc
    • kacper.pietrzak
    • luminous_cal
    • notmentat
    • pierredupuis
    • hortega_rs
    • alim-scott
    • anneshackelford
    • mcolladoredsift
    • redsift_operations
    • raul.lorenzo.redsift
    • rahulpowar
    • randalpinto
    • njaremek
    • earada
    • jmiralles
    • nascimj
    • kitty_vandergijp
    • neilsaccardo
    • bmayolasredsift