Black Lives Matter. Please consider donating to Black Girls Code today.

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

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

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