Dash Bootstrap Spinner & Progress Bar

Use Dash to create a spinner loader and hide the loader automatically when loading is completed. We'll also go over the progress bar component and the ways we can change its values. Using Dash Bootstrap, we'll learn to manipulate these components inside our dashboard, as we combine them with the button and the Plotly Histogram. Download code below.

View my book - The Book of Dash:

Code:

Taxi Data:

CSS Spinner styling:

Spinner Component- Dash Bootstrap:

Loading Component- Dash Core:

Progress Bar- Dash Bootstrap:

Supporting Document:

Video layout:
00:00 - What you will learn
02:01 - Data used and python libraries
02:57 - Code and Layout
06:17 - Spinner component (Bootstrap)
13:22 - More Spinner components (Dash Core)
15:37 - Connecting Spinner to Button
22:40 - Progress Bar
26:48 - Closing remarks

************************************************************************

[avisankhadutta]

Man thanks to you that I have added another dimension to my career on data science, i.e., quick frontend development as well. In previous org, I was the key contributor in introducing dash free of cost. And now I have had the opportunity to demonstrate my analysis output to numerous clients across the globe. I wish I could interact with you over email about the integration of genai multimodal system with dash, I've been doing over past year.

[banglargaan]

18:47 Most important part, how to use the loading component.

Put the dcc.Graph() *inside* the dcc.Loading() component.

Thanks Charming Data! Kudos!

[adityanjsg]

One stop channel for Dash developers!!

[andrewm]

ohh - just got to the part where you were going to show me how to use the progress bar without all the redis stuff! Love these videos, find them one of best dash resources out there. Am struggling to find easy just dash example of how to just update progress from within a function that's actually doing the work. Feel like might be a hacky way using globals that would be fine for my app.

[gunarlin]

Thank you, your dash videos are always helpful :-)

[agustindangelo]

Great! I wish you the best. You are making very didactic and high quality content. Greetings from Argentina :)

[sumanhalder]

Is there a way to do this while my api endpoint fetches data? Showing progress bar with the remaining time from api would also be helpful

[karimbouaziz]

Great video thanks a lot :)
I'm new to dash and i wanted to ask, is it possible when i have a dcc.Loading to hold the old figure while loading the next one after clicking the button, so instead of showing the spinner and its animation, the previous figure should be kept in place until the next one is shown. I hope I explained the problem well
Thanks in advance

[konstantinospaidis]

Hi and thanks for the video!
I have a callback that has as input a button, has different states as well and has two outputs, a figure and a dataframe.to_json. When I am putting a spinner on the figure as you showed and clicking the button, the figure is updated but the spinner never appears. Any ideas why that could be happening? Thanks in advance!

[nawalelboghdady]

Super useful video! Thanks a lot for the great content! I was wondering if it is possible to set up the dbc.spinner or dcc.Loading to run the animation only once at the beginning of the dash initialization to avoid the 'awkward silence' that happens at the beginning so to speak as figures are being generated. I have figures that update their content every 10 minutes, so having a spinner pop up every 10 minutes would be very annoying. This seems to be a common problem for some people online as well. Thank you very much in advance!!

[lasbikh]

Brilliant tutorial indeed. I tried dcc.Loading with dash_table.DataTable but it doesn't seem to work, any idea? the table takes a few seconds to load so i wanted to wrap it inside dcc.Loading.

[its_me]

what if someone want to output results other than graphs like list or dict? Can we put that in same way inside spinner/loading component? However I tried and it isn't showing me the results.

[stoufa]

And another question: Instead of messing with HTML and CSS, can we simply add a GIF image inside the spinner? ... I got the idea from loading.io 😁

[stoufa]

Great video, as usual. 😊
Did anyone tried one of the advanced spinners, I tried to add the additional <div> tags inside the spinner but it didn't work!

[allanmathews]

Can we put dbc components inside dcc components??