Обходной путь для анимации положения фона на псевдоселекторе в элементе прогресса

Question

У меня есть неопределенный индикатор выполнения:

<progress max="100"></progress>

Я установил его на зеленом фоне с полосами в 45 градусов:

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress:not([value])::-webkit-progress-bar {
  background-image:
    -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
    -webkit-linear-gradient(#b3ee3a, #b3ee3a);
  background-size: 2.5em 1.25em, 100% 100%, 100% 100%;
  background-position: 10%;
  animation-name: stripes;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes stripes {
  from {background-position: 0%}
  to {background-position: 100%}
}

(Полный пример: https://jsfiddle.net/w9x7sm6c/4/)

К сожалению, анимация не работает. Кажется, проблема связана с ошибкой / функцией Chrome:

https://bugs.chromium.org/p/chromium/issues/detail?id=486195

Закрытие как WontFix.

Причина: ограничено имя правила @keyframes, поэтому указанное имя доступно только в одном и том же дереве (т. Е. В том же документе или теневом корне). Progress :: - webkit-progress-value pierces document-UAГраница теневого корня и стиль элемента, но имя анимации, определенное в древовидной области документа, недоступно в теневом корне UA, поэтому анимация не применяется.

...

Обходной путьможет быть сделать свой собственный виджет и анимировать его, который должен работать во всех (если реализована CSS-анимация) браузер.

Мне кажется, что предложенный обходной путь - просто не использовать <progress>,что мне кажется плохим советом.использовать правильные семантические элементы, чем придумывать что-то, что делает то же самое.

Можно ли использовать какой-либо обходной путь для анимации этого индикатора выполнения в его неопределенном состоянии?

Answer 1

Вы можете рассмотреть общий псевдоэлемент, чтобы создать это.

body {
  background: #333;
}

progress {
  display: block;
  margin-bottom: 1em;
  position:relative;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background-color: #777;
  border-radius: 0.3em;  
}

progress[value]::-webkit-progress-bar {
  box-shadow: 0 0.3em 0.3em rgba(0,0,0, 0.3) inset;
}

progress::-webkit-progress-value {
  border-radius: 0.3em;
  background-color: #b3ee3a;
}


progress:not([value])::-webkit-progress-bar {
  /* nothing here*/
}
progress:not([value])::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 0.3em; 
  background:
    linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%) left/2.5em 1.25em,
    #b3ee3a;
  background-position: 10%;
  animation-name: stripes;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes stripes {
  from {background-position: 0%}
  to {background-position: 100%}
}

<progress max="100" value="33"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="90"></progress>
<progress max="100"></progress>

Или используйте JS для обновления значений, используя CSS-переменные в сочетании с тайм-аутом.

Вот базовый пример для отображения изменения значения:

function update() {
  document.querySelector('progress:not([value])').style.setProperty("--c", "100%");
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress:not([value])::-webkit-progress-bar {
  background:
    linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
    #b3ee3a;
  background-size: 2.5em 1.25em;
  background-position: var(--c,10%);
  transition:1s all;
}

<progress max="100"></progress>

<button onClick="update()">change</button>