Loading component does not support different colors for multiple instances of same type.

[ngnpope]

The loading component does not support different colors for multiple instances of the same type. Note that this affects all of the spinners that output the color within the <style> block, i.e. all except for the graph spinner.

The issue can be reproduced using the following:

import time

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

app = dash.Dash()
app.layout = html.Div([dcc.Input(id='hidden', type='hidden')] + [
    dcc.Loading(html.Div(id='callback-%d' % i, style={
        'color': color,
        'font-family': 'sans-serif',
        'font-size': '12px',
        'font-weight': 'bold',
        'height': '40px',
        'line-height': '40px',
        'margin': '1rem auto',
        'text-align': 'center',
        'width': '50px',
    }), color=color) for i, color in enumerate(COLORS)
], style={'width': '100px'})


for i, color in enumerate(COLORS):
    @app.callback(Output('callback-%d' % i, 'children'), [Input('hidden', 'value')])
    def content(*ignored, color=color):
        time.sleep(5)
        return color.title()


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

Clearly the style block is being overridden each time a new instance is added as they all have their own copies of the styles.

Two observations related to this issue:

1. Each spinner having a copy of the styles seems rather inefficient.
2. On page load all the spinners trigger, and then for some reason the red spinner triggers again which doesn't seem right...

I am using dash==0.41.0.