Setting the size of a Loading component

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',),
                                                          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?

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%;

    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

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

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.

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"},

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

Hope this helps!

1 Like

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.