Svgrady NPM | npm.io

SVGRady ◠

Radial SVG Preview

You can install SVGRady as an NPM package:

npm install svgrady

Or link directly to the CDN:

<script src="https://unpkg.com/svgrady@latest/dist/svgrady.min.js"></script>

Import package

import svgrady from 'svgrady'

In your layout add data attribute with values (min,max). Where 3 is minimal(completed steps), and 5 is total count, separated by comma.

Note: you will need to use data attribute to initialize svgrady

<div data-svgrady="3,5"></div>

Customize options and initialize SVGRady

Note: Polar axis is rotated by 90° and is located on top
Look at Configuration for possible options

let options = {}

new svgrady(options)

Options that can be passed:

selector - add svgrady to elements with data-selector (default svgrady)
width - SVG width 150 (default 150)
height - SVG height (default 150)
radius - SVG radial radius (default 60)
start - Start angle (default -140)
end - End Angle (default 140)
spacing - Spacing between each step (default 5)
activeColor - Active(Completed) step color (default #613DC1)
color - Default color for step (default #D9DAD8)
replace - if true, will replace element with svg (default false)
strokeWidth - SVG stroke width, will be used to calculate distance between each step (default 4)
linecap - SVG stroke linecap e.g.:( round | butt | square) (default round)
className - Class name that will be added to svg