flyonui/components/progress.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.progress-animated{animation:1s linear infinite progress-bar-stripes}.progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.progress-info{background-color:var(--color-info);color:var(--color-info-content)}.progress-success{background-color:var(--color-success);color:var(--color-success-content)}.progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.progress-error{background-color:var(--color-error);color:var(--color-error-content)}.progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}@keyframes indeterminate-progress{0%{background-position-x:-75%}50%{background-position-x:125%}to{background-position-x:-75%}}@keyframes progress-bar-stripes{0%{background-position-x:.75rem}}.progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}@media (width>=640px){.sm\:progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.sm\:progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.sm\:progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.sm\:progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.sm\:progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.sm\:progress-animated{animation:1s linear infinite progress-bar-stripes}.sm\:progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.sm\:progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.sm\:progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.sm\:progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.sm\:progress-info{background-color:var(--color-info);color:var(--color-info-content)}.sm\:progress-success{background-color:var(--color-success);color:var(--color-success-content)}.sm\:progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.sm\:progress-error{background-color:var(--color-error);color:var(--color-error-content)}.sm\:progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}.sm\:progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}}@media (width>=768px){.md\:progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.md\:progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.md\:progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.md\:progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.md\:progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.md\:progress-animated{animation:1s linear infinite progress-bar-stripes}.md\:progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.md\:progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.md\:progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.md\:progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.md\:progress-info{background-color:var(--color-info);color:var(--color-info-content)}.md\:progress-success{background-color:var(--color-success);color:var(--color-success-content)}.md\:progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.md\:progress-error{background-color:var(--color-error);color:var(--color-error-content)}.md\:progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}.md\:progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}}@media (width>=1024px){.lg\:progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.lg\:progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.lg\:progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.lg\:progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.lg\:progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.lg\:progress-animated{animation:1s linear infinite progress-bar-stripes}.lg\:progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.lg\:progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.lg\:progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.lg\:progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.lg\:progress-info{background-color:var(--color-info);color:var(--color-info-content)}.lg\:progress-success{background-color:var(--color-success);color:var(--color-success-content)}.lg\:progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.lg\:progress-error{background-color:var(--color-error);color:var(--color-error-content)}.lg\:progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}.lg\:progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}}@media (width>=1280px){.xl\:progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.xl\:progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.xl\:progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.xl\:progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.xl\:progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.xl\:progress-animated{animation:1s linear infinite progress-bar-stripes}.xl\:progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.xl\:progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.xl\:progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.xl\:progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.xl\:progress-info{background-color:var(--color-info);color:var(--color-info-content)}.xl\:progress-success{background-color:var(--color-success);color:var(--color-success-content)}.xl\:progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.xl\:progress-error{background-color:var(--color-error);color:var(--color-error-content)}.xl\:progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}.xl\:progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}}@media (width>=1536px){.\32 xl\:progress{border-radius:var(--radius-box);background-color:var(--color-base-200);width:100%;height:.375rem;display:flex;overflow:hidden}.\32 xl\:progress-label{border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)25%,transparent);width:fit-content;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);padding-block:.125rem;padding-inline:.375rem;display:inline;position:relative}.\32 xl\:progress-horizontal{border-radius:var(--radius-box);flex-direction:row;justify-content:flex-start;width:100%;height:.375rem}.\32 xl\:progress-vertical{border-radius:var(--radius-box);flex-direction:column;justify-content:flex-end;width:.375rem;height:100%}.\32 xl\:progress-striped{background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:.75rem .75rem}.\32 xl\:progress-animated{animation:1s linear infinite progress-bar-stripes}.\32 xl\:progress-bar{border-radius:var(--radius-box);background-color:var(--color-neutral);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-neutral-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.5s;--tw-ease:var(--ease-in-out);transition-duration:.5s;transition-timing-function:var(--ease-in-out);justify-content:center;align-items:center;display:flex;overflow:hidden}.\32 xl\:progress-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.\32 xl\:progress-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.\32 xl\:progress-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.\32 xl\:progress-info{background-color:var(--color-info);color:var(--color-info-content)}.\32 xl\:progress-success{background-color:var(--color-success);color:var(--color-success-content)}.\32 xl\:progress-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.\32 xl\:progress-error{background-color:var(--color-error);color:var(--color-error-content)}.\32 xl\:progress-bar.progress-indeterminate{background:linear-gradient(90deg,#0000 50%,var(--progress-color)50%);background-repeat:no-repeat;background-size:50% 100%;width:100%;animation:4s ease-in-out infinite indeterminate-progress}.\32 xl\:progress-step{background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);text-align:center;width:100%;height:.375rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:var(--color-base-100);flex-direction:column;justify-content:center;display:flex}}}