Setting the size of a Loading component

Dash Python
1

I’ve just starting using the dash Loading core component but would like the component smaller.

 import dash_core_components as dcc
 ...
 html.Div([html.Button('Run Slow Process', id='run-process-button',),
                dcc.Loading(id="running-process",
                                   children=[
                                                          html.Div(id='run-status', children=[html.Div('Ready')])
                                                   ],
                                   type="circle", style={??????} )
                               ])

What can I put in the style={???} parameter to make the circle 10ppx by 10px?

2

I updated my CSS with the following. Just tweak yours as needed.

.dash-spinner.dash-default-spinner {
    margin: 1rem auto;
    width: 99%;
    height: 20vh;
    text-align: center;
    font-size: 50px;
    margin-left: 1%;
}

.dash-default-spinner-rect1,
.dash-default-spinner-rect2,
.dash-default-spinner-rect3,
.dash-default-spinner-rect4,
.dash-default-spinner-rect5{
    background-color: #119DFF !important;
    height: 10vh !important;
    width: 2vh !important;
    display: inline-block !important;
    margin-right: 1% !important;
    margin-top: 3.5vh !important;
}
1 Like
3

Cant seem to get this to work on cube style loader, anyone have ideas?

4

Same here. The classes are indeed called
dash-spinner.dash-default-spinner, dash-default-spinner-rect1…
but it doesn’t seem to work.
When setting the same props as style=dict(...) the default settings are overwritten which is also annoying.

5

If you are open to using another library, you can try out: LoadingOverlay. It works the same as dcc.Loading but uses its own loader.

There’s a section on this page on customising the loader as well.

app.layout = dmc.LoadingOverlay(
    loaderProps={"variant": "dots", "color": "violet", "size": "xs"},
    children=[...]
),

In order to see what all properties can be customised for the loader, have a look at: Loader.

Hope this helps!

1 Like
6

This is insane! I didnt know there were great libraries apart from dbc. Thanks for the share.

edit: didn’t realize you were the author! it’s absolutely beautiful, I definitely will be trying out your library soon.

2 Likes