Black Lives Matter. Please consider donating to Black Girls Code today.

Live Stage Visualization


I am relatively new to Dash/plotly and currently exploring a possibility to show a live stage visual.
To explain with an example, let’s say that I have a code written which keeps sending trace/verbose message as soon as it completes one function/segment of code and does this till it completes, is there a way to show the same in a visual format as to where the code is currently.

I am not sure how clear the query sounds so added a snapshot of what I picturize. This is similar to monitoring tool visuals like Nagios

Hi @rajat, and welcome to the Dash community!

You could try using a bootstrap progress bar or button group:

You can find more info here:

Here are two examples::

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
        dcc.Interval(id="progress-interval", n_intervals=0, interval=100),


                    "stage " + str(i),
                    id="stage" + str(i),
                    style={"border": None, "border-radius": "50%"},
                for i in range(1, 5)

    [Output("progress_bar", "value"), Output("progress_bar", "children")],
    [Input("progress-interval", "n_intervals")],
def update_progress_bar(n):
    # check progress of some background process, in this example we'll just
    # use n_intervals constrained to be in 0-100
    progress = min(n % 110, 100)
    # only add text after 5% progress to ensure text isn't squashed too much
    return progress, f"{progress} %" if progress >= 5 else ""

    [Output("stage" + str(i), "color") for i in range(1, 5)],
    [Input("progress-interval", "n_intervals")],
def update_stage_button(n):

    progress = min(n % 110, 100)
    stage_number = progress // 25

    stages = ["white", "white", "white", "white"]  # startup  colors
    stage_colors = ["primary", "success", "warning", "info"]

    stages[:stage_number] = stage_colors[:stage_number]  # update colors to show step
    return stages

if __name__ == "__main__":

Thanks a lot @AnnMarieW

I will give it a try and mark the answer as solution once I can concur.