HTTP request linear progress indicator color

Question

I am showing a fixed horizontal progress line at the very top of may Web page that is as long as the viewport width. It is displayed when an HTTP request is pending.

It is similar to the Indeterminate linear progress indicator of the Material Design

My accent / theme color is blue. And the progress line is also blue as you see in the picture. A few buttons, and the header in one of the page, and the footer have also blue background.

What color should I use for the horizontal progress line?

Does it matter that it should not have the theme color as its background?

Update

This is a web page that displays articles (texts). All of the pages has white background and black foreground (text color).

I have only two buttons. One of them is blue and the other one is green. And a header in one of the pages, and the footer have also blue background.

These are the colors that I have used or may use.

Answer 1

–Does it matter that it should not have the theme color as its background?–

It all depends on the notoriety degree you want to give to the HTTP request: the higher the contrast, the more relevance, and vice versa.

Using the color scheme and distributions described in the question, with a simple graph you can visualize a basic contrast to help you decide which is the right combination: more subtle using colors with a higher percentage in the design and more prominent with less used colors.

In case of greater visual relevance, and leaving the basic color scheme, knowing the web uses pure inks with a preponderance of cool colors, it's clear that any opposite on the color wheel will provide the best contrast:

From here, there are different methods to achieve even greater relevance, always taking the most preponderant colors as a reference. A couple of examples:

Contrast Hue, Brightness, and Saturation

Texture contrast