daisyui/components/progress.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}@keyframes progress{50%{background-position-x:-115%}}@media (width>=640px){.sm\:progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.sm\:progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.sm\:progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.sm\:progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.sm\:progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.sm\:progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.sm\:progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.sm\:progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}}@media (width>=768px){.md\:progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.md\:progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.md\:progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.md\:progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.md\:progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.md\:progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.md\:progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.md\:progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}}@media (width>=1024px){.lg\:progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.lg\:progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.lg\:progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.lg\:progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.lg\:progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.lg\:progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.lg\:progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.lg\:progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}}@media (width>=1280px){.xl\:progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.xl\:progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.xl\:progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.xl\:progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.xl\:progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.xl\:progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.xl\:progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.xl\:progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}}@media (width>=1536px){.\32 xl\:progress{@layer daisyui.l1.l2.l3{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.l1.l2{color:var(--color-primary)}}.\32 xl\:progress-secondary{@layer daisyui.l1.l2{color:var(--color-secondary)}}.\32 xl\:progress-accent{@layer daisyui.l1.l2{color:var(--color-accent)}}.\32 xl\:progress-neutral{@layer daisyui.l1.l2{color:var(--color-neutral)}}.\32 xl\:progress-info{@layer daisyui.l1.l2{color:var(--color-info)}}.\32 xl\:progress-success{@layer daisyui.l1.l2{color:var(--color-success)}}.\32 xl\:progress-warning{@layer daisyui.l1.l2{color:var(--color-warning)}}.\32 xl\:progress-error{@layer daisyui.l1.l2{color:var(--color-error)}}}}