I’ve been trying various plugins (and lots of Googling) but keep coming to dead ends.
My app has a dashboard page that currently uses the Progress Bars plugin (by Bubble), but I really want something that looks more like this (with circular gauges):
The ones in the image are from Angular 6.
I’ve seen the liquid gauges by Zeoqode but they aren’t really minimalist enough for my tastes.
Does anyone know of any plugins, or have any other suggestions? I’m reasonably happy using a little bit of HTML, CSS or JavaScript if I need to.
@graemejallen83 It would be awesome if you could maybe share how you got this to work? Even a very basic version. I’ve also tried for a long time to do something like this without being confined to the existing plugins (currently paying for one), as i’m sure others have. Having attempted this though, it seems I still need a little guidance when it comes to implementing javascript / css!
Upload the files “loading-bar.css” and “loading-bar.js” to the root folder of your bubble (files available from here: https://loading.io/progress#installation).
Then add just one HTML element to your page (in my case with dimensions of 212 x 275) and add the following code (this is how I’ve set mine up, adjust the parameters to suit your needs):
Then, for more gauges, add more HTML elements with the HTML above, remembering to give each one unique class name (in 2 places - example above: “uniqueName1”). You can omit the style part if you want them all to look the same.
This is how mine look (they animate when the page is loaded):
This is fantastic! Thank you.
I am going to give this a bash. Quick question to start with please… When you say this:
“Upload the files “loading-bar.css” and “loading-bar.js” to the root folder of your bubble”
Hm, sorry but I don’t follow. If for instance I have a thing of “Members” and I want to have a gauge that shows the total number of Members, how do I do write that as dynamic data?
Writing “Search for Members:count” inside the html-part obviously won’t work.
Do I reference a bubble text field that does the calc?
Writing it out in the HTML element won’t work, but you can insert dynamic data i the HTML element just as you can in a simple text field. Place your cursor where you want the dynamic data and setup your logic for Search for members:count.
Great addition @simon7. You saved this slow headed bubbler quite a bit of pain.
This has been one fine collaboration from the community. Thanks again all for the posts and sharing of learnings. Along those lines, it took me a bit to get the syntax working for dynamic colors. See below for those who need:
Thanks graemejallen83 and everyone else for sharing your knowledge! This has been a huge help.
I’ve made an attempt at setting up this element in my app. Unfortunately, I can’t quite get the gauge to appear visibly on my page.
When I load the page with the HTML element, there is an “General Error” ( Sorry, we have encountered an unexpected error. Please file a bug report (Help -> Report a bug), including error code…).
If I select “show as an iframe” within the html element - the error disappears, but the progress circle still isn’t visible.
I believe I’ve copied the steps exactly as you laid out. Could this be because I am in development mode - not live? If not, do you guys have any other ideas?