daisyui/components/progress.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}@keyframes progress{50%{background-position-x:-115%}}@media (width>=640px){.sm\:progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.sm\:progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.sm\:progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.sm\:progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.sm\:progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.sm\:progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.sm\:progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.sm\:progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.sm\:progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}}@media (width>=768px){.md\:progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.md\:progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.md\:progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.md\:progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.md\:progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.md\:progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.md\:progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.md\:progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.md\:progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}}@media (width>=1024px){.lg\:progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.lg\:progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.lg\:progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.lg\:progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.lg\:progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.lg\:progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.lg\:progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.lg\:progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.lg\:progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}}@media (width>=1280px){.xl\:progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.xl\:progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.xl\:progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.xl\:progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.xl\:progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.xl\:progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.xl\:progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.xl\:progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.xl\:progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}}@media (width>=1536px){.\32 xl\:progress{@layer daisyui.component{&{appearance:none;border-radius:var(--radius-box);background-color:color-mix(in oklab,currentcolor 20%,transparent);width:100%;height:.5rem;color:var(--color-base-content);position:relative;overflow:hidden}&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;@media (prefers-reduced-motion:no-preference){&{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{background-color:#0000;@media (prefers-reduced-motion:no-preference){&{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}}}}@supports ((-moz-appearance:none)){&::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){&::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}&::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}}}.\32 xl\:progress-primary{@layer daisyui.modifier{&{color:var(--color-primary)}}}.\32 xl\:progress-secondary{@layer daisyui.modifier{&{color:var(--color-secondary)}}}.\32 xl\:progress-accent{@layer daisyui.modifier{&{color:var(--color-accent)}}}.\32 xl\:progress-neutral{@layer daisyui.modifier{&{color:var(--color-neutral)}}}.\32 xl\:progress-info{@layer daisyui.modifier{&{color:var(--color-info)}}}.\32 xl\:progress-success{@layer daisyui.modifier{&{color:var(--color-success)}}}.\32 xl\:progress-warning{@layer daisyui.modifier{&{color:var(--color-warning)}}}.\32 xl\:progress-error{@layer daisyui.modifier{&{color:var(--color-error)}}}}}