Functions use node-style callback convention. Callback function is always the last given parameter.

Shapes have different SVG canvas sizes:

Shape Canvas size
Circle 100x100
SemiCircle 100x50
Line 100x{opts.strokeWidth}

All shapes are fitted exactly to their canvases.

Important: make sure that your container has same aspect ratio as the SVG canvas. For example: if you are using SemiCircle, set e.g.

#container {
    width: 300px;
    height: 150px;
}

HTML structure

As an example, we'll use these options:

var circle = new ProgressBar.Circle('#example-percent-container', {
    color: '#FCB03C',
    strokeWidth: 3,
    trailWidth: 1,
    text: {
        value: '0'
    }
});

They would produce the following HTML.

<!-- If text is set, position: relative will be applied for the container -->
<div id="container" style="position: relative;">

    <!-- The actual progress bar SVG -->
    <svg viewBox="0 0 100 100">
        <!-- Trail path -->
        <path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#eee" stroke-width="1" fill-opacity="0"></path>

        <!-- Actual progress bar path -->
        <path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#FCB03C" stroke-width="3" fill-opacity="0" style="stroke-dasharray: 304.844360351563px, 304.844360351563px; stroke-dashoffset: 304.844360351563px;"></path>
    </svg>

    <!-- Text element created when text option is set -->
    <p class="progressbar-text" style="position: absolute; top: 50%; left: 50%; padding: 0px; margin: 0px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: rgb(252, 176, 60);">0</p>
</div>