README
SVGRady ◠
Javascript Separated Radial SVG generator
Installation
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>
Usage
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)
Configuration
Options that can be passed:
selector
- add svgrady to elements with data-selector
(defaultsvgrady
)width
- SVG width 150 (default150
)height
- SVG height (default150
)radius
- SVG radial radius (default60
)start
- Start angle (default-140
)end
- End Angle (default140
)spacing
- Spacing between each step (default5
)activeColor
- Active(Completed) step color (default#613DC1
)color
- Default color for step (default#D9DAD8
)replace
- if true, will replace element with svg (defaultfalse
)strokeWidth
- SVG stroke width, will be used to calculate distance between each step (default4
)linecap
- SVG stroke linecap e.g.:(round
|butt
|square
) (defaultround
)className
- Class name that will be added to svg
To Do:
Things that can be implemented.
- Animations
- Tooltips (show info about step)
- Flex grow on elements?
- Pass multiple options?
- ...
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.