plotly-dashdash-bootstrap-components

How to use *spinner_style* in dbc.Spinner?

I am trying to use dbc spinner, and I notice spinner_style is used to add Inline CSS styles to apply to the spinner. Is there an example of how to use this config?

I am currently using spinner_class_name=“position-absolute top-0 start-50” to position the spinner loading element in the top middle. However, I want to move this a bit to the left corresponding to start-20, which is not available in Bootstrap 5.0 by default. I think this can be achieved by specifying position value in spinner style, but I do not know how.

Solution

  • You can use any CSS format with that. I use left and top attributes together to position the spinner, and you can tune these two values, see the example below:

    import dash
import dash_bootstrap_components as dbc


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

app.layout = html.Div(
    [
        dbc.Spinner(spinner_style={"position":"absolute", "left":"300px", "top":"20px"}),
    ]
)


if __name__ == '__main__':
    app.run_server(debug=True)

    Output:

    enter image description here