🔥 Create a progress circle without a plugin

Need to create a progress circle in your app?

Here’s some sneaky code so you can do it for free without a plugin :wink: :point_down:

Step 1

Add the following code to the HTML header of the page(s) where you want to display the progress circle.

Why? This imports a javascript library that contains a lot of the necessary underlying code.

Pro tip: download this file and add to the file manager of your app (self-host) in case this file becomes unavailable at some point

<script type="text/javascript" src="https://s3.amazonaws.com/appforest_uf/f1653801289839x298259557076639100/progressbar.js" async></script>

Step 2

Create an HTML element wherever you’d like to display the progress circle, and add this code

<style>
#container {
  width: 140px;
  height: 140px;
  position: relative;
}
</style>

<script>
var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 8,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 0,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#33CD5F', width: 4 },
  to: { color: '#33CD5F', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('0%');
    } else {
      circle.setText(value + '%');
    }

  }
});
bar.text.style.fontFamily = 'Montserrat';
bar.text.style.fontSize = '1.25rem';

bar.animate(0.75);  // Number from 0.0 to 1.0
</script>

<div id="container"></div>

Step 3

Customize it.


Change the width/height to a size of your liking (make sure this is slightly smaller than the size of your HTML element so it doesn’t get clipped

Screen Shot 2022-08-01 at 9.14.46 am


Set the progress

Make the ‘0.75’ dynamic to show progress

Screen Shot 2022-08-01 at 9.18.46 am


Change the color & width

The default is a gradient, but in this case, I’ve set the color to a solid green. You can also change the width here.


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

I post daily about no-code and Bubble on Twitter Follow Support Dept on Twitter

8 Likes

@josh24
Hi,

When the page loads the progress circle is loaded, but when i reload the page it vanishes and I get the following error in console.

run.js:8 Bug in custom html:
ReferenceError: ProgressBar is not defined

Any Idea how can i resolve this.

Regards,
Ram