Hi Fam
Are you looking to add sleek, modern, and highly customizable radial progress bars to your B4A, B4i, or B4J projects? Let me introduce you to B4XDaisyRadialProgress.
This custom UI component leverages B4XCanvas to natively draw crisp rings and borders while offering incredible flexibility. It is heavily inspired by Tailwind CSS and DaisyUI, allowing you to easily manage sizes, thicknesses, and semantic colors.
Here are the key features that make this component stand out:
• Semantic Color Variants: Out of the box, you can set the Variant property to primary, secondary, accent, info, success, warning, or error to automatically theme your progress bar.
• Flexible Display Types: Choose what goes in the center! You can display standard text (like percentages), embed an SVG file using B4XDaisySvgIcon, or leave it blank with the none option.
• Text Count-Up Animations: Bring your data to life. By enabling TextCountUp and adjusting the CountUpSpeed, your text value will incrementally animate alongside the progress ring.
• Customizable Sizes & Thickness: Define sizes using Tailwind tokens or standard CSS sizes (e.g., 80dip, 5rem, 80px). You can easily adjust the thickness of the stroke using percentages or dips (like 10% or 4dip).
• Prefixes & Suffixes: Easily append symbols like $ or % directly to the displayed text value using the built-in Prefix and Suffix properties.
• Total Visual Control: Need something completely custom? You can override the background color, border color, track color, and text color natively.
Example Usage (B4XPageRadialProgress): In the included example page, you can see various ways to implement the component. It demonstrates:
1. Different values dynamically populated via an array.
2. Custom colors and styling, including a "neutral" variant with specific RGB text and track colors.
3. Different sizes and thicknesses side-by-side.
4. SVG DisplayType showing how to easily implement "check-solid.svg" and "xmark-solid.svg" assets directly into the progress ring.
5. A timer-based animation loop utilizing the SetValueAnimated method to create smooth, easing progress updates.
Drop this class into your project and instantly upgrade your app's user experience. Let me know what you think below, and feel free to share screenshots of how you use it in your own apps!
Related Content
www.b4x.com
Are you looking to add sleek, modern, and highly customizable radial progress bars to your B4A, B4i, or B4J projects? Let me introduce you to B4XDaisyRadialProgress.
This custom UI component leverages B4XCanvas to natively draw crisp rings and borders while offering incredible flexibility. It is heavily inspired by Tailwind CSS and DaisyUI, allowing you to easily manage sizes, thicknesses, and semantic colors.
Here are the key features that make this component stand out:
• Semantic Color Variants: Out of the box, you can set the Variant property to primary, secondary, accent, info, success, warning, or error to automatically theme your progress bar.
• Flexible Display Types: Choose what goes in the center! You can display standard text (like percentages), embed an SVG file using B4XDaisySvgIcon, or leave it blank with the none option.
• Text Count-Up Animations: Bring your data to life. By enabling TextCountUp and adjusting the CountUpSpeed, your text value will incrementally animate alongside the progress ring.
• Customizable Sizes & Thickness: Define sizes using Tailwind tokens or standard CSS sizes (e.g., 80dip, 5rem, 80px). You can easily adjust the thickness of the stroke using percentages or dips (like 10% or 4dip).
• Prefixes & Suffixes: Easily append symbols like $ or % directly to the displayed text value using the built-in Prefix and Suffix properties.
• Total Visual Control: Need something completely custom? You can override the background color, border color, track color, and text color natively.
Example Usage (B4XPageRadialProgress): In the included example page, you can see various ways to implement the component. It demonstrates:
1. Different values dynamically populated via an array.
2. Custom colors and styling, including a "neutral" variant with specific RGB text and track colors.
3. Different sizes and thicknesses side-by-side.
4. SVG DisplayType showing how to easily implement "check-solid.svg" and "xmark-solid.svg" assets directly into the progress ring.
5. A timer-based animation loop utilizing the SetValueAnimated method to create smooth, easing progress updates.
Drop this class into your project and instantly upgrade your app's user experience. Let me know what you think below, and feel free to share screenshots of how you use it in your own apps!
Related Content
[B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind
Hi Fam Disclaimer: The [B4A] in the title? This b4xlib has only been tested with B4A, thus the title. I have not checked the cross-platform functionality as its on the roadmap when I finish the complete library. The b4xlib is still in ALPHA stage, things might change, apis might break and...
www.b4x.com
