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.

11 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:

2 Likes

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

Hello,

Have been really enjoying using many of these on my dashboard.

2 Questions for you /anyone who can answer,

1)Full screen option of the dls spinner gives white background. My whole dashboard is very dark. Is there a way to changing it to, black? If so, please send a simple code example.

  1. when using dls spinners for single charts, animation is very smooth. For subplots or for multiple charts it chitters quite a lot (so the pacman for example looks like he is having a fit :)) I tried the delay offset parameter at the end however it does not completely fix the issue

Hello @Drxdre! I’m really glad to hear that you are enjoying using the spinners.

  1. With regards to your question on the full screen usage, you can control how the full screen container appears by making use of the following properties:
  • fullscreenClassName (string; optional): CSS class names to apply to the container when in fullscreen.
  • fullscreen_style (dict; optional): Defines CSS styles for the container when in fullscreen.

This means that you could pass in a bootstrap class (if you were using bootstrap) by passing in the parameter fullscreenClassName=“bg-dark”. Alternatively, if you are using just inline CSS, you could do something like fullscreen_style={“backgroundColor”: “black”}.

  1. When you say you’ve used the time delay, do you mean the debounce property? Can you see if the behaviour still occurs if you swap out the spinner for the dcc.Loading component to check that it’s definitely related to this library and not how dash works with them? If you don’t see the same effect with the Loading component, please can you raise an issue in the dls GitHub repo with a minimal example to demonstrate the issue?

Thanks!

2 Likes

Thank you so much for such a quick and detailed reply.

Changed the full screen color, my mistake for not reading the documentation properly.

Regarding 2), Struggling to reproduce the jitters in an isolated page, so will take down the prod dashboard on a quiet day and test the dcc or dbc spinners instead. Will reply again to confirm in a few days!

@Drxdre,

A thing to keep in mind, the spinners will run based upon the client’s browser and computer. If it is a difficult image to render and there are a lot, it will slow down how fast it can run.

Hello, @glsdown
Thank you for the great component!!!

I am using ThemeSwitchAIO to switch bootstrap themes.
Can I use css variables for fullscreen_style?
I would like to do the following:
fullscreen_style={‘backgroundColor’:‘var(–bs-body-color)’}