Build Multilingual Websites with Gridbox

Build Multilingual Websites With Joomla Website Builder Gridbox
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

ZeroApp + progress pie

6 days 11 hours ago #1

  • Đuro's Avatar
  • Đuro
  • Posts: 142
Hi,

I am currently working on a project where I should make a field in zeroapp where only the number is entered, but that number should be displayed on the page as a progress bar, can this be done using CSS? Can you help me a little :whistle:

6 days 11 hours ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
Hello,
Thank you for contacting us

Send us a link to the page with the field
For this, there is not enough CSS code,
for this you need to use JS.

Best Regards,
Vyacheslav, Balbooa Support Team

6 days 11 hours ago #3

  • Đuro's Avatar
  • Đuro
  • Posts: 142
Attachments:

6 days 10 hours ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
You need to add JS code at the code editor
document.addEventListener('DOMContentLoaded', function(){
	jQuery('#item-16420825600 .ba-field-content').each(function(){
	    this.style.setProperty('--content-width', this.textContent+'%');
	});
});
and CSS code
#item-16420825600 .ba-field-content:after,
#item-16420825600 .ba-field-content:before {
    content: "";
    background: #333;
    width: var(--content-width);
    display: block;
    height: 4px;
    position: absolute;
    bottom: 0;
}

#item-16420825600 .ba-field-content:after {
    background: #bbb;
    width: 100%;
}

#item-16420825600 .ba-field-content:before {
	z-index: 1;
}

Best Regards,
Vyacheslav, Balbooa Support Team

6 days 10 hours ago #5

  • Đuro's Avatar
  • Đuro
  • Posts: 142
Thanks, it all works, but I thought it was in the circle as a progresspie. Sorry I wasn't clear.

6 days 10 hours ago #6

  • Đuro's Avatar
  • Đuro
  • Posts: 142
Thus, as in the attachment only that in addition to the number I have a percentage and the word "calories" below
Attachments:

6 days 10 hours ago #7

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
Unfortunately, there is no such possibility.

Best Regards,
Vyacheslav, Balbooa Support Team

6 days 10 hours ago #8

  • Đuro's Avatar
  • Đuro
  • Posts: 142
It doesn’t need to be animated, just be in a circle. As you did but make a straight line, circle and inside number.

5 days 14 hours ago #9

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
Unfortunately there is no such possibility.

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum