Live Tracker

Lightweight, vanilla javascript/svg library (~1kb gzipped 🎉)

Default color

Custom color

Demos

Link Vanilla JS

Link Angular 6 Usage

Link Live Data Simulation

Install

npm

npm install --save live-tracker

Usage

Install via npm(see above) or Download/clone the files

Link to JS file ex.:

<script src="src/index.min.js" type="text/javascript"></script>

Element to render

<div class="container">
</div>

To initialize Live-tracker:

var livet = new LiveTracker({
    render: document.getElementsByClassName("container")[0],
    steps: [{
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    },
    {
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    },
    {
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    },
    {
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    },
    {
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    },
    {
    iconFill: "#fff",
    iconSvg: "m3.48439,15.83231l2.79376,-3.50417l7.65345,9.59499l12.75805,-15.99165l2.79474,3.5017l-15.55279,19.4983"
    }]
});

livet.setActive(3);
livet.setProgress(0, 100);
livet.setProgress(1, 100);
livet.setProgress(2, 100);
livet.setProgress(3, 60);

Methods

Method	Description
.setActive(step)	active a stage
.setProgress(step, percentage)	set progress for one stage

Step Object

Propertie	Type	Description
color	string	stage main color
borderColor	array	array with 2 elements (gradien border)
activeColor	string	stage main color when is actived
iconSvg	string	path for the icon svg

TODOs

• getPercentage
• getState
• create types/ module es6

Authors

• Mauricio Joost Wolff - Initial work - GitHub

See also the list of contributors who participated in this project.

License

This project is licensed under the ISC License