/*keep prefixes*/
progress[value] {
  appearance: none;
  border: 0;
  color: blue; /*IE*/
  height: 11px;
  margin-top: 1em;
  width: calc(100% - 1ch - 3ch - 1ch + 5px); /*.percent { padding-left: 1ch }; 5px is mystery*/
}
/*moz START*/
progress[value]::-moz-progress-bar {
  background-image:
    -o-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -o-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -o-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -moz-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -webkit-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -webkit-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -webkit-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -webkit-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -webkit-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-size: calc(11px * 2) calc(11px * 1), 100% 100%, 100% 100%;
}
/*moz END*/
/*webkit START*/
progress[value]::-webkit-progress-bar { background-color: #EEE }
progress[value]::-webkit-progress-value {
  background-image:
    -o-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -o-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -o-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -moz-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -webkit-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -webkit-linear-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-image:
    -webkit-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 255, 0.1) 33%, /*blue*/
      rgba(0, 0, 255, 0.1) 66%, /*blue*/
      transparent 66%
    ),
    -webkit-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 255, 0.25) /*blue*/
    ),
    -webkit-gradient(
      left,
      lightyellow,
      lightyellow
    );
  background-size: calc(11px * 2) calc(11px * 1), 100% 100%, 100% 100%;
}
/*webkit END*/