Hi Fam
Are you tired of basic spinning progress wheels? If you want to give your users a polished, modern app experience while data is loading in the background, it’s time to look at Skeleton Loading with animated shimmer effects!
Using the powerful B4XDaisyDiv and B4XDaisyLabel components, you can now effortlessly toggle beautiful skeleton placeholders.
How it Works Both components come equipped with an IsSkeleton boolean property,. When set to True, the component hides its standard content and brings a dedicated skeleton panel (pnlSkeleton) to the front,.
An internal 16ms timer drives a buttery-smooth 1.8-second (1800ms) animation loop using a cubic ease-in-out curve to sweep a bright shimmer across the screen from left to right,,.
• B4XDaisyDiv (Containers & Shapes): Perfect for mocking up profile images or text blocks. The component draws a solid base rounded rectangle (Color_RGB(209, 213, 219)) and layers dynamic, clipped shimmer strips (Color_RGB(243, 244, 246)) over it,,.
• B4XDaisyLabel (Text Elements): Instead of drawing a solid block, labels take a much smarter approach. They render the actual text at 20% opacity. Then, using native Android clipping paths, it draws the fully opaque text only within the angled shimmer region as it moves across the screen,. The result is a stunning, readable text shimmer!
Quick Example Implementation You can easily build a "Profile Card" skeleton. For example, you can combine a circular div for an avatar (w-16 h-16 rounded-full) with smaller rectangle divs (w-32 h-4) and standard daisy labels,.
Toggling the entire loading state on or off is as simple as flipping the boolean on your views:
Related Content
www.b4x.com
Are you tired of basic spinning progress wheels? If you want to give your users a polished, modern app experience while data is loading in the background, it’s time to look at Skeleton Loading with animated shimmer effects!
Using the powerful B4XDaisyDiv and B4XDaisyLabel components, you can now effortlessly toggle beautiful skeleton placeholders.
How it Works Both components come equipped with an IsSkeleton boolean property,. When set to True, the component hides its standard content and brings a dedicated skeleton panel (pnlSkeleton) to the front,.
An internal 16ms timer drives a buttery-smooth 1.8-second (1800ms) animation loop using a cubic ease-in-out curve to sweep a bright shimmer across the screen from left to right,,.
• B4XDaisyDiv (Containers & Shapes): Perfect for mocking up profile images or text blocks. The component draws a solid base rounded rectangle (Color_RGB(209, 213, 219)) and layers dynamic, clipped shimmer strips (Color_RGB(243, 244, 246)) over it,,.
• B4XDaisyLabel (Text Elements): Instead of drawing a solid block, labels take a much smarter approach. They render the actual text at 20% opacity. Then, using native Android clipping paths, it draws the fully opaque text only within the angled shimmer region as it moves across the screen,. The result is a stunning, readable text shimmer!
Quick Example Implementation You can easily build a "Profile Card" skeleton. For example, you can combine a circular div for an avatar (w-16 h-16 rounded-full) with smaller rectangle divs (w-32 h-4) and standard daisy labels,.
Toggling the entire loading state on or off is as simple as flipping the boolean on your views:
B4X:
Private Sub ToggleSkeleton(Active As Boolean)
' Toggle basic shapes
divAvatar.IsSkeleton = Active
divCircle.IsSkeleton = Active
divRect.IsSkeleton = Active
' Toggle text content
lblTitle.IsSkeleton = Active
lblSubtitle.IsSkeleton = Active
End SubRelated 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
