Show-and-Tell - Dash Loading Spinners

Hi all! I just wanted to share a new Dash component library I’ve recently made called dash-loading-spinners which is full of different spinners to use in place of the basic dcc.Loading component.

You can read the docs here which includes examples of the spinners included.

I’ve added it to PyPI so can be installed using pip:

pip install dash-loading-spinners

Hope you enjoy it. Feel free to contribute, make suggestions etc via GitHub. It’s my first python package, so there are likely to be things I’ve missed, or haven’t done quite right. All feedback is appreciated.

8 Likes

So great! Thanks so much for publishing these and writing such great docs. Love the page full of the examples

I think my favorite is the triangle one :slight_smile:

1 Like

Thank you! Really glad you have enjoyed them.

1 Like

Awesome. I wish I can put all of them to my apps :wink:
Thanks!

1 Like

Thanks! It looks amazing :smiley: . I can’t wait to take it for a spin (:

2 Likes

hi @glsdown
Can you please add a few things to the example code in your documentation, because in its current state, it cannot run successfully.

import dash
import dash_bootstrap_components as dbs
import dash_core_components as dcc
import dash_html_components as html
import dash_loading_spinners as dls

app = dash.Dash(external_stylesheets=[dbc.themes.UNITED])

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.FormGroup(
                        dbc.Button(
                            "Simulate slow loading component",
                            id="loading-button",
                            className="btn-success",
                            n_clicks=0,
                        )
                    ),
                    md=3,
                ),
                dbc.Col(
                    dls.Hash(
                        dcc.Graph(id="loading-output",),
                        color="#435278",
                        speed_multiplier=2,
                        size=100,
                    ),
                    md=9,
                ),
            ],
        ),
    ]
)


@app.callback(
    Output("loading-output", "figure"), [Input("loading-button", "n_clicks")],
)
def load_output(n):
    return get_new_graph(n)

if __name__ == "__main__":
    app.run_server()


This line of import needs to be added: from dash.dependencies import Output, Input
Also, this needs to be changed to ‘dbc’: import dash_bootstrap_components as dbs

Lastly, we need to add the function get_new_graph.

Thank you,

1 Like

Hi @adamschroeder, thanks for the feedback and spotting those!

I’ll add in the missing imports and fix that error as those are not intentional and an oversight on my behalf. However the get_new_graph function is deliberately ambiguous to simply show that “something” is done. The actual function behind the scenes is messy and I believe it will muddy the waters for what the actual package does. My intention with that example is to provide something to demonstrate the spinners working whilst the component is loading, rather than provide a complete working program.

I will add a comment in the documentation to that effect. I don’t want to replace it with a simple sleep function as I found when I was trying to work out how the loaders worked, that just confused me, and I didn’t make the connection.

Thanks!

1 Like