-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Subtitle text for Circle Progress bar #47
Comments
Currently the API supports only adding text, which is (foolishly) assumed to be percent or similar. Since this is not supported in the API currently, you can do it your self by adding elements to the container. The structure of HTML looks like this: <!-- 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> That HTML is produced from this initialization: var circle = new ProgressBar.Circle('#example-percent-container', {
color: '#FCB03C',
strokeWidth: 3,
trailWidth: 1,
duration: 1500,
text: {
value: '0'
},
step: function(state, bar) {
bar.setText((bar.value() * 100).toFixed(0));
}
});
circle.animate(1, function() {
circle.animate(0);
}); You should omit the text attribute and style the center div your self. Here's an example how to do it: CSS: progressbar.js/sass/examples.scss Line 1 in ec4e711
|
Ah ic. Alrights thanks ;) |
I'll close this for now. If there will be more need to customize center element, I'll get back to this |
Right below the percent 👍
The text was updated successfully, but these errors were encountered: