Contents

.progress {
  --track: var(--color-secondary);
  --progress: var(--color-primary);

  background-color: var(--track);
  border-radius: var(--rounded-full);
  block-size: var(--size-4);
  inline-size: var(--size-full);
  overflow: hidden;

  &:indeterminate {
    background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
    background-size: 225% 100%;
    background-position: right;
    animation: progress-loading 2s infinite ease;
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background-color: var(--track);
  }

  &::-webkit-progress-value {
    background-color: var(--progress);
  }

  &:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background-color: var(--progress);
  }

  &:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }
}

@keyframes progress-loading {
  50% {
    background-position: left;
  }
}

Version data entries

8 entries across 8 versions & 1 rubygems

Version	Path
css-zero-0.0.18	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.17	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.16	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.15	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.14	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.13	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.12	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
css-zero-0.0.11	lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css