Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@redsift/d3-rs-progress

Package Overview
Dependencies
5
Maintainers
11
Versions
9
Issues
File Explorer

Advanced tools

@redsift/d3-rs-progress

Generates an animated D3v4.

    0.0.5latest

Version published
Maintainers
11
Yearly downloads
4,483
decreased by-2.75%

Weekly downloads

Readme

Source

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.

ParameterDetail
locationOptional, defaults to body String, D3 Selection CSS selection where the icon should be injected.
iconOptional, defaults to the standard size Reusable Chart to render as the animated Icon.
ReturnsDetail
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

Keywords

FAQs

What is @redsift&#x2F;d3-rs-progress?

Generates an animated D3v4.

Is @redsift&#x2F;d3-rs-progress popular?

The npm package @redsift&#x2F;d3-rs-progress receives a total of 109 weekly downloads. As such, @redsift&#x2F;d3-rs-progress popularity was classified as not popular.

Is @redsift&#x2F;d3-rs-progress well maintained?

We found that @redsift&#x2F;d3-rs-progress demonstrated a not healthy version release cadence and project activity. It has 11 open source maintainers collaborating on the project.

Last updated on 29 Jan 2020
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc