Custom CSS for Div Widget not working on a server Linux

i want to Add busy/working spinner for my bokeh apps with this:

spinner_text1 = """<div class="loader">
                            <style scoped>
                            .loader {
                                border: 16px solid #f3f3f3; /* Light grey */
                                border-top: 16px solid #3498db; /* Blue */
                                border-radius: 50%;
                                width: 5px;
                                height: 5px;
                                animation: spin 2s linear infinite;
                            }
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            } 
                            </style>
                            </div>"""   

widget = Div(text=spinner_text1)

When i click on a button my spinner will be displayed.

It works very well on my computer Window in the local. But when i developed on a server with Linux, it doesn’t work. I checked the file log, there is no error. everything seem ok but my spinner doesn’t display.

I ask myself, if i create a spinner class in style.css and do like this. Maybe it works?

widget= Div(text=" ")
widget.css_classes=["loader"]

AFAIK the Scoped CSS proposal was withdrawn by the WHATWG. If you check caniuse.com, it reports that the feature is basically not supported anywhere except a specific range of Firefox browsers: Can I use... Support tables for HTML5, CSS3, etc Without code to run and test, my first guess is that that’s the issue, and that it’s only an accident that it “worked” on whatever browser you happened to try first.

it works very well in the local (with or without the Scoped CSS ). I will try on the server without the Scoped CSS . Thanks Bryan

I have remove Scope in my style:

spinner_text1 = """<div class="loader">
                            <style >
                            .loader {
                                border: 16px solid #f3f3f3; /* Light grey */
                                border-top: 16px solid #3498db; /* Blue */
                                border-radius: 50%;
                                width: 5px;
                                height: 5px;
                                animation: spin 2s linear infinite;
                            }
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            } 
                            </style>
                            </div>"""   

widget = Div(text=spinner_text1)

I have the same problem

I would try using inlines style in the div tag next, then. Maybe putting the style tag inside the very thing being styled is problematic (just a speculation).

I found the solution. It depends on the version of navigator. I don’t know why. If i use Google Chrome 72 , it didn’t work, but with Chrome 74 or 75 it works.

FWIW I think it would be good to try any find a solution that works on all browers. My guess is that inline CSS (or alternatively a css_classes referring to CSS defined in the <head> of a template) would work everywhere, but it would be nice to confirm.