This is a repackage of rteslaru/meteor-circular-progress which is "a reactive, flexible, SVG-based circular progress bar for Meteor."

Table of Contents

• Overview
• Getting Started
• Declaring Arguments
• Customizing the Progress Bar
• Using the Reactive Data Sources
• Using Multiple Instances on One Page
• Options
• Issues
• Contribute
• License

circular-progress is an SVG circular progress bar written specifically for Meteor. Besides the progress bar itself, you can also display text in the middle of the circle. It's meant to be usable out of the box; just drop {{> circularProgress}} anywhere in your templates and you're good to go!

See it in action at http://circular-progress.meteor.com

Install circular-progress via meteorite:

mrt add circular-progress

You interact with circular-progress via session variables, so if you don't care much about styling, animations or transitions, here's a quick way to start:

Note that progressPercent takes values from 0 - 100. You can, of course, pass 0.5 but that would be interpreted as 0.5%, not 50%.

Since circularProgress is a regular template, you can pass arguments to it like you normally do.

You can set the data context directly into your template:

{{> circularProgress canvasSIze=250 arcWidth=30}}

You may prefer to pass along an object with the arguments, like so:

<template name="mainTemplate">
  {{#with circularOptions}}
    {{> circularProgress}}
  {{/with}}
</template>

Template.mainTemplate.circularOptions = function() {
    return {
        'canvasSize': 250,
        'arcWidth': 10,
        'sessionValueKey': 'progressValue',
        'tweenDuration': 300
    }
}

The HTML layout of the progress bar is designed to give you maximum flexibility on how you choose to use it. The SVG itself is nested within two <div> tags, and you can set a CSS class on each. For example:

{{> circularProgress outerDivClass="outer-div" innerDivClass="inner-div"}}

will render

<div class="outer-div">
    <div id="svg-progress-container" class="inner-div">
        <svg>...</svg>
    </div>
</div>

That should allow you to do most anything you want layout-wise, including, for example, centering via outer left: 50% and inner left: -50%.

circular-progress is made of three visual components: an outer border, the progress bar and any optional text. You can apply your own CSS class to each of these elements, as follows:

The radius, width and other parameters of the progress bar are set as follows:

Check out the Options section for details and default values of these parameters.

You can control the value of the progress bar and the text inside it via Session variables. By default, circular-progress looks for 'progressPercent' and 'progressText', but you can customize what Session keys it uses with the following options:

For example, you can set the keys:

{{> circularProgress sessionValueKey="my-value-key" sessionTextKey="my-text-key"}}

Then, you can control circular-progress via these keys:

Session.set('my-value-key', 95);
Session.set('my-text-key', 'Almost there!');

You can use more than one progress bar per page, provided you give each a different ID. You probably want to set different session variables too.

Here's an example how to initialize three circular-progress templates on the same page:

{{> circularProgress containerId="svg-container-1" sessionValueKey="value-key-1" sessionTextKey="text-key-1"}}
{{> circularProgress containerId="svg-container-2" sessionValueKey="value-key-2" sessionTextKey="text-key-2"}}
{{> circularProgress containerId="svg-container-3" sessionValueKey="value-key-3" sessionTextKey="text-key-3"}}

circular-progress was tested with Meteor up to 0.8.1.2. If you encounter any issues, please open a ticket at https://github.com/rteslaru/meteor-circular-progress/issues

Pull requests are more than welcome!

Released under the MIT license.