Help with loading component Size and layout

Dash Python
1

Hello Everyone,

I am using the dash loading component to have a loader after clicking on the download image button.
The loader then helps the user know that their is SQL query running the background and converts the result into a dataframe and then downloads a csv file. The problem I am currently facing is that am not able to increase or decrease the size of the loader nor I can adjust it to the required position. I want the layout to be across the card header on the extreme right side of the card header.

dbc.Card(
                            [
                                dbc.CardHeader(
                                    [
                                        html.H6("Tickets This Month", className="mb-0",
                                                style={'font-size': '12px'}),
                                        html.Img(
                                            src='assets/download.png',
                                            height='15px',
                                            width='15px',
                                            id='download_month_ticket',
                                            style={'background': 'none', 'cursor': 'pointer'},
                                            className="border-0 d-flex justify-content-between align-items-center",

                                        ),

                                        html.Div(
                                            [
                                                dcc.Loading(
                                                    dcc.Download(
                                                        id='download_month_ticket_data'
                                                    ),
                                                    type='circle',
                                                    style={'height': '1%'},
                                                )
                                            ],
                                            className="border-0 d-flex justify-content-between align-items-center"

                                        )
                                    ],
                                    className="border-0 d-flex justify-content-between align-items-center"
                                ),
                                dbc.CardBody(
                                    [
                                        html.Img(src='assets/tickets.png',
                                                 style={'height': '24px', 'width': '24px',
                                                        'margin-right': '10px'},

                                                 alt='icon', className='img-fluid'),
                                        html.H3("25", className="card-title"),
                                    ],
                                    className="border-0 d-flex align-items-center"
                                ),
                            ],
                            style={"height": "auto", "border-radius": "10px",
                                   "background-color": "#CDCDCD",
                                   "box-shadow": "1px 2px 7px 0px grey"},
                            className="border-0"
                        ),

Please help me with this .

Loading Component dimension fix

2

I want the loading component to appear on the extreme right side of the card header and its dimensions must be very small.

Please help me with this.

3

Hey @Lucifer, I substituded the dcc.Loading with a dbc.Spinner and played around a bit with styling and classes, try this:

        dbc.Card(
            [
                dbc.CardHeader(
                        dbc.Stack(
                            [
                                html.H6("Tickets This Month", className="mb-0",
                                        style={'font-size': '12px'}),
                                html.Img(
                                    src='assets/download.png',
                                    height='15px',
                                    width='15px',
                                    id='download_month_ticket',
                                    style={'background': 'none', 'cursor': 'pointer'},
                                    className='me-auto'
                                ),
                                dbc.Spinner(
                                    dcc.Download(
                                        id='download_month_ticket_data'
                                    ),
                                    size='sm',
                                    spinner_style={'min-height': '1.6rem', 'min-width': '1.6rem'},
                                )
                            ],
                            direction='horizontal'
                        )
                ),
                dbc.CardBody(
                    [
                        html.Img(src='assets/tickets.png',
                                 style={'height': '24px', 'width': '24px',
                                        'margin-right': '10px'},

                                 alt='icon', className='img-fluid'),
                        html.H3("25", className="card-title"),
                    ],
                    className="border-0 d-flex align-items-center"
                ),
            ],
            style={"height": "auto", "border-radius": "10px",
                   "background-color": "#CDCDCD",
                   "box-shadow": "1px 2px 7px 0px grey"},
            className="border-0"
        )
1 Like
4

Thanks a Lot Aimped!!! Is there any way to highlight the image(download icon) when it gets clicked ? Like a circular shaped shadow behind it while hovering and after clicking ?