Color of the progress bar during splash for HTML5

Godot Version

Godot 4.3

Question

The image configured in the project settings is now used during the load of the project in HTML5, which is great. However, the color of the progress bar doesn’t appear anymore in index.html. In my previous projects since Godot 3.x, I could manually change the color of this bar in css to match the color palette of the splash image. I didn’t find anything relevant in index.js either.
For my new game, I currently have three suboptimal choices : a vibrant blue cutting a sepia image (very ugly), don’t display the bar (bad for people with slow internet), let the godot default image.
Funny thing, in the merge note of this change, the bar is not blue… I’m probably missing an elephant, but I can’t find him.

I think the progress bar is a native control so its look depends on the browser (and the theme selected therein). With Firefox on Ubuntu and the GTK theme it’s orange. You might be able to override the styling through CSS.

You’re right!
I had a bluebar with Fedora and Android, so I didn’t think it was OS dependant, but changing the theme in Fedora did change the color!
So now, I have to figure out to find how to override the OS style. (Sadely, the #status-progress-inner tag disappeared… that would have been too simple)
Anyway, thank you very much for the hint!

Ok, so there is the hard way inwhich you have to make a lot of changes to adapt to both webkit and mozilla’s browsers. Better if you really want to change everything, because it resets all the defaults of the element.
And the simple way, to change only the color:

progress{
	accent-color: #e29676
}

It’s enough in my case. Thanks again to domdfcoding.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.