progress {
  position: relative;
  height: 8px;
  display: block;
  width: 100%;
  border-radius: 1px;
  background-color: #7c7876;
  background-clip: padding-box;
  overflow: hidden;
  margin: 0 auto; }
  progress::-moz-progress-bar, progress::-ms-progress-bar, progress::progress-bar {
    background-color: #7c7876; }
  progress::-webkit-progress-bar {
    background-color: #7c7876; }
  progress[value] {
    background-color: #2679a6;
    appearance: none; }
    progress[value]::-moz-progress-value, progress[value]::-ms-progress-value, progress[value]::progress-value {
      background-color: #2679a6;
      transition: width 0.5s cubic-bezier(0, 0, 1, -0.12); }
    progress[value]::-webkit-progress-value {
      background-color: #2679a6;
      transition: width 0.5s cubic-bezier(0, 0, 1, -0.12); }
  progress:not([value]) {
    background-color: #2679a6;
    position: relative; }
    progress:not([value]):before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    progress:not([value]):after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation-delay: 1.15s; }

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }