Seu problema é por causa do " #
" na cor do fill
!
[Deprecation] Using unescaped '#' characters in a data URI body is
deprecated and will be removed in M68, around July 2018. Please use
'%23' instead. See
https://www.chromestatus.com/features/5656049583390720 for more
details.
Se vc substituir o valor das cores por uma "string" tipo red
ou black
que vai funcionar ou trocar #
por %23
como sugerido pelo próprio warning acima. As versões antigas do Chrome dão esse alerte, apesar de conseguir renderizar a cor, mas parece que o FireFox mais antigo nem a cor chega a mostrar.
Pode testar aqui que pelo nos nos FireFox mais novo vai rodar.
.modalFrame {
overflow: hidden;
height: 50px;
width: 100%;
background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100"> <path fill="red" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="darkgray" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
background-position: center;
}
<div class="modalFrame"></div>