New Component: 20+ Animated loaders, updated navbar and more from Hydralit Components

The new version of Hydralit Components is done. There have been a number of improvements and additions. You can see and play with the new features in the update Hydralit live demo.

Navbar:

  • Tighter/smoother animation
  • Can toggle animation on/off
  • Ability to override the return value
  • Sticky navbar (still bounces, but that’s Streamlit problems)

HyLoader:

  • 20+ custom animated css based loaders
  • Can use 1, 2 or any number that comes from the same palette of loaders (the demo screens are just a grid of the entire palettes)
  • Auto loads theme colours
  • Use them the same as the spinner component and just wrap around your running code
  • Can add multiple or replicas
  • Add custom loading banner text
  • Creative, standard and pretty types are available
  • Any loader adds a halo around the entire application when running, so the entire page is embossed during loading

As simple as wrapping your code in the loader,

import hydralit_components as hc

# a dedicated single loader 
with hc.HyLoader('Now doing loading',hc.Loaders.pulse_bars,):
    time.sleep(loader_delay)

# for 3 loaders from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=[3,0,5]):
    time.sleep(loader_delay)

# for 1 (index=5) from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=5):
    time.sleep(loader_delay)

# for 4 replications of the same loader (index=2) from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=[2,2,2,2]):
    time.sleep(loader_delay)

You can visit the live running Hydralit sample and checkout the Loader Playground to see what is possible.


And more!

Experimental:

  • Allows for the injection of custom Javascript and HTML directly into Streamlit
  • Can be turned on/off with a toggle

Remember, it’s called experimental for a reason.

There are alot more things in the new release, but I don’t have time to demo and document it all.

6 Likes

Nice component

That’s a very cool upgrade to the Hydralit library. Thanks for sharing and keep the awesome work @Probability!

Best,
Charly

Hi @Probability, thanks for these amazing components!

I’ve installed the last version and when I start my application, it shows these borders while the app is loading:

I changed the loader, but it still showing the borders. Is there any way to remove/disable them?

Thanks in advance!
Wilber

Thanks, those borders are part of the loader effect, they can’t be disabled as they are there to provide an indicator that the entire app is being loaded, which is essentially what happens during a rerun, think of it like the grey tint over the controls that Streamlit shows by default when performing a rerun. I’ll make a note to look at providing a toggle on the border effect in the next version.

1 Like