Health Ring Demo

Basic usage

Add a container like this:

    <div class="health-ring-container"></div>

and JS like this:

    <script>
        new HealthRing('.health-ring-container')
            .add(60, .70, '#fc8b26')
            .add(50, .64, '#ffcc00');
    </script>

to render health rings like this:

Adding more rings

The arguments are:

.add(radius, percentage, color)

So, we could add a smaller green ring, 32% complete, like this:

    <script>
        new HealthRing('.health-ring-container')
            .add(60, .70, '#fc8b26')
            .add(50, .64, '#ffcc00')
            .add(40, .32, '#00ff00');
    </script>

Adding rings one at a time

You may want to add a ring using separate calls to the add() function. In that case, the HealthRing class doesn't know how large the SVG should be. By default, it will use the radius from your first call to add() to set the SVG size. If you always start by adding the outermost ring, this will work fine. If not, you may get something like this:

    <script>
        let ring = new HealthRing('.health-ring-container');
        ring.add(40, .32, '#00ff00');   // the first call to add() sets the size, 
                                        // big enough for a circle of radius 40...
        ring.add(50, .64, '#ffcc00');   // ...but this is bigger (radius 50)
        ring.add(60, .70, '#fc8b26');   // radius 60
        ring.add(200, .70, '#fc8b26');  // radius 200
    </script>

To fix that, you can either:

1. always add() the largest ring first, or
2. pass the radius of the largest ring when you instantiate HealthRing, like this:

    <script>
        let ring = new HealthRing('.health-ring-container', 200); // "200" is the radius of the largest ring
        ring.add(40, .32, '#00ff00');
        ring.add(50, .64, '#ffcc00');
        ring.add(60, .70, '#fc8b26');
        ring.add(200, .70, '#fc8b26');
    </script>

Setting the stroke width

You can also set the width of the stroke, like this:

    <script>
        new HealthRing('.health-ring-container', null, 3)
            .add(60, .70, '#fc8b26')
            .add(50, .64, '#ffcc00')
            .add(40, .32, '#00ff00');
    </script>

The default stroke width is 7. A stroke width of more than about 10 starts to look smooshed together.