Dash_Create_spinner_button.ipynb

Kernel: Python 3

Dash - Create spinner button

Give Feedback | Bug report

Tags: #dash #button #download #create #python #library #spinner

Author: Florent Ravenel

Last update: 2023-06-03 (Created: 2023-06-03)

Description: This notebook will show how to create a spinner button with Dash. The Spinner component can be used inside buttons to indicate that an action is currently processing or taking place.

References:

• Dash Bootstrap Components - Spinner

Input

Import libraries

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbc
from dash import html

Setup Variables

• DASH_PORT: specify a port number for Dash

DASH_PORT = 8050

Model

Initialize Dash app

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

# app = dash.Dash() if you are not in Naas

Create download button

spinners = html.Div(
    [
        dbc.Button(
            dbc.Spinner(size="sm"),
            color="primary",
            disabled=True,
            className="me-1",
        ),
        dbc.Button(
            [dbc.Spinner(size="sm"), " Loading..."],
            color="primary",
            disabled=True,
        ),
    ]
)

app.layout = html.Div(
    [
        # SPACE
        html.Br(),
        
        # Spinner button
        spinners
    ]
)

Output

Generate URL and show logs

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")