Animated ChartsTutuapp

[hoangcv18]

Has anybody been able to create percentage circles like these. They are pretty standard on Wordpress but trying to figure out how to add these or something similar

[Whittfield]

Bootstrap 4 (and therefore Blocs) don’t have a charting feature or percentage circles. Their are standalone libraries that can add these. Some are straight CSS while others also use javascript to do the job.

The easiest way

Attach the necessary files of a percentage circle library within Blocs.
Here’s one I just found in a quick search

There are a lot fancier ones out there, this is just the first link I clicked on.

Once the CSS file is attached, you can use an HTML Bric to add the Markup. By simply changing class names in the Markup you can get different styles.

The markup for the library above looks like this… Add this to an HTML Bric.

<div class="c100 p33 dark small blue">
     <span>33%</span>
     <div class="slice">
     <div class="bar"></div>
     <div class="fill"></div>
     </div>
</div>

This markup above will output a small blue percentage circle with 33% selected.

[Norm]

This could be easy made into a custom Bric.

[Whittfield]

I will try. It’s been on my todo list to play around with the api. Wish me luck.

[Flashman]

It took about 10 seconds to add this to Blocs seen here as a live preview.

[webplus]

Please tell me, if you manage to create the bric, otherwise I will create one.

[Flashman]

I am playing with this now, but it’s my first attempt at any sort of bric building. Creating the bric was easy, but with my lack of knowledge here I’m struggling to see a way of changing the percentage in the side panel. This needs to work so you can have five of these in a row if necessary and all with different percentages.

[Whittfield]

Custom Bric: CSS Percentage Circles

Free bric: CSS Percentage Circles

Hi @Norm, I’ve cobbled together a simple custom bric. I’m not sure if this is the proper way to distribute the file. Do I need to .zip the custom bric directory as well? It uses the .css I downloaded from the project listed above. The css was taken as is. The color schemes, sizes etc., are all taken from the project. I’m choosing not to extend or change the css at this point. Download PercentageCircle.bex (66.8 KB) [percent_circles] FAQ: Q. Why only three colors? A. That’s what the proje…

[Flashman]

That’s awesome thank you!

[webplus]

@Whittfield congratulations to your first bric You only need to distribute the bex file. I will have a look at your bric this evening

[Whittfield]

Thank you sir …and good to know about the file.

One thing I was curious about. How do I get the styles to show up in Blocs. I added the css to both the “resources” and “includes” section but I still don’t see the styles in the Blocs app when I place the bric. I only see the styles when I preview the page. Am I missing something?

Thanks again!