Hello everyone,
Just a simple tip to help others customize the native progress in Bubble. I wanted to take the below progress bar and modify it.
To do this i simply added a progress bar to the page then added an HTML Element (you can off-course use the page header if you like) and then added the CSS below. This way I transformed it to
All by adding this CSS
<style>
.inner-progressbar {
padding: 0px 0px !important;
}
.progressbar-ProgressBar {
overflow: visible !important;
text-align: right !important;
}
.progressbar-label {
position: relative !important;
top: -32px !important;
background-color: #F9CD4A !important;
color: white !important;
padding: 5px !important;
left: 16px !important;
}
.progressbar-label:after,
.progressbar-label:after {
z-index: -1;
position: absolute;
top: 100%;
left: 34%;
margin-left: 0px;
content: '';
width: 0px;
height: 0;
border-top: solid 6px #F2CC47;
border-left: solid 6px transparent;
border-right: solid 6px transparent;
}
</style>
19 Likes
@AliFarahat, it is possible to create a circular progress bar using CSS?
No unfortunately i don’t think so using the native progress bar
@AliFarahat
I’m trying to use your method on vertical native progress bars (rotated -90 dgs).
Every element within the progress bar rotates along the parent element. But I want to single the text within the label out to stay horizontal. I’ve tried, to no avail, every piece of css code, that I know of, to rotate the text.
Can you help me out to get the text horizontal?
Here an image of my progress bars look at the moment:
What I’m trying to achieve:
Current CSS:
indent preformatted text by 4 spaces <style>
.inner-progressbar {
padding: 0px 0px !important;
border-radius: 0px 50px 50px 0px;
transform: rotateY: (90deg);
}
.progressbar-ProgressBar {
overflow: visible !important;
text-align: right !important;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.progressbar-label {
position: relative !important;
top: 0px !important;
background-color: #FFFFFF !important;
color: black !important;
height: 50px;
width: 50px;
padding: 20px;
left: 0px !important;
border-radius: 150px;
transform: rotate(90deg);
transform-origin: right, top;
-ms-transform: rotate(90deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:right, top;
}
.progressbar-label:after,
.progressbar-label:after {
direction: rtl ;
position: absolute;
top: 100%;
margin-left: 0px;
content: '';
width: 0px;
height: 0;
}
Jammer ek kan nie jou hulp met jou vraag boet. Welkom by Bubble.
Hi @AliFarahat,
I tried to just copy/paste your CSS into the page HTML header as follows, but no change to the Bubble progress bar. Can you please advise on where I am missing a step.
Thank you
Does your app support headers on its current plan? If no then please try adding the css code to an html element on the page
