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:
https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly/dp/1718502222
https://github.com/DashBookProject/Plotly-Dash

Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Bootstrap/spinners_bar.py

Taxi Data:
https://drive.google.com/file/d/1Srm_mhf6oRb6R5kFijFzaZk6tye9Ugb0/view?usp=sharing

CSS Spinner styling:
https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Bootstrap/assets/spinner_styling.css
https://tobiasahlin.com/spinkit/

Spinner Component- Dash Bootstrap:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/spinner/

Loading Component- Dash Core:
https://dash.plotly.com/dash-core-components/loading

Progress Bar- Dash Bootstrap:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/progress/
https://dash-rq-demo.herokuapp.com/
https://github.com/tcbegley/dash-rq-demo

Supporting Document:
https://drive.google.com/file/d/1ciGVkkqgJ7b_riXUP6E_aOrjiZ0kTWPT/view?usp=sharing


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

************************************************************************
? If you appreciate these tutorials, would like to support their existence and get some perks: https://www.patreon.com/charmingdata