Introducing: New Progress Circle and Progress Bar Blocks

Introducing: New Progress Circle and Progress Bar Blocks

0 Shares

It’s been a while since we last released a new block. In case you missed it, we’ve been busy upgrading Stackable’s performance so you can have a seamless experience building websites. You can read this article to learn more. Now, we’re excited to present to you our new blocks: the Progress Bar and the Progress Circle.

Visual content is easier to consume compared to text, especially when it comes to data! If you update Stackable to version 3.6.0, you can now present data in a bar or a circle. These are usually used to track progress, whether for projects, goals, or even skill mastery!

These blocks have very flexible controls and styling options! You can set the maximum limit of your progress bar or circle so you have control over what values you can use for it.

Additionally, you get to customize the sizing of the bars. The Progress Bar’s width and the Progress Circle’s size and thickness are responsive, so you can set different values for different viewports.

Make your graphs stand out with colorful hues. When you add a Progress Bar or Progress Circle, you can use single or gradient colors and even change the color of the bar’s background.

You can also choose to animate the Progress Bar or Progress Circle so that when a website visitor scrolls to the section of the page where you added it, the bar will fill up! See how that looks here:

Lastly, you can add text to your progress bar to label it. And you can also add a prefix or a suffix, which will be added before or after the progress value; this could be a unit of measurement, like a percentage.

The Progress Bar and Progress Circle blocks are a great way to make content on your website easier to consume for your audience. To get these blocks, update Stackable to version 3.6.0 now and let us know what you think!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.