@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
265 lines (225 loc) • 6.56 kB
CSS
/**
* Progress Bar
*
* Progress bars visualize the completion status of a task or process, showing
* users how much has been completed and how much remains. They can include
* percentages, labels, and different visual styles.
*
* @layer: components
*
* Accessibility:
* - Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
* - Include text alternatives for screen readers
* - Ensure sufficient color contrast for all states
* - Consider color blind users when choosing colors
*/
@layer components {
/* Base progress bar container */
.progress {
background-color: var(--color-neutral-200, #e5e7eb);
border-radius: var(--radius-full, 9999px);
height: var(--progress-height, 0.5rem);
overflow: hidden;
position: relative;
width: 100%;
}
/* Progress bar fill */
& .fill {
background-color: var(--color-primary-500, #3b82f6);
border-radius: var(--radius-full, 9999px);
height: 100%;
left: 0%;
position: absolute;
top: 0%;
transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
}
/* Progress with label */
.progress--with-label {
margin-bottom: var(--space-1, 0.25rem);
}
/* Progress label */
& .label {
color: var(--color-text-muted, var(--color-neutral-700, #374151));
display: flex;
font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
justify-content: space-between;
margin-bottom: var(--space-2, 0.5rem);
}
& .title {
font-weight: var(--font-medium, var(--font-weight-medium, 500));
}
& .value {
font-variant-numeric: tabular-nums;
}
/* Progress sizes */
.progress--xs {
height: 0%.25rem;
}
.progress--sm {
height: 0%.375rem;
}
.progress--md {
height: var(--progress-height, 0.5rem);
}
.progress--lg {
height: 0%.75rem;
}
.progress--xl {
height: 1rem;
}
/* Progress shapes */
.progress--square {
border-radius: var(--radius-sm, 0.25rem);
}
.progress--square & .fill {
border-radius: var(--radius-sm, 0.25rem);
}
/* Progress colors */
.progress--primary & .fill {
background-color: var(--color-primary-500, #3b82f6);
}
.progress--secondary & .fill {
background-color: var(--color-secondary-500, #6b7280);
}
.progress--success & .fill {
background-color: var(--color-success-500, #10b981);
}
.progress--danger & .fill {
background-color: var(--color-error-500, #ef4444);
}
.progress--warning & .fill {
background-color: var(--color-warning-500, #f59e0b);
}
.progress--info & .fill {
background-color: var(--color-info-500, #3b82f6);
}
/* Progress with steps */
.progress--stepped {
background-color: transparent;
display: flex;
gap: var(--progress-step-gap, 4px);
height: auto;
justify-content: space-between;
}
& .step {
background-color: var(--color-neutral-200, #e5e7eb);
border-radius: var(--radius-full, 9999px);
flex: 1;
height: var(--progress-height, 0.5rem);
transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
}
& .step--completed {
background-color: var(--color-primary-500, #3b82f6);
}
& .step--active {
background-color: var(--color-primary-300, #93c5fd);
}
.progress--stepped.progress--square & .step {
border-radius: var(--radius-sm, 0.25rem);
}
/* Progress with steps and labels */
.progress--with-step-labels {
margin-bottom: var(--space-6, 1.5rem);
}
& .steps-container {
display: flex;
justify-content: space-between;
margin-top: var(--space-2, 0.5rem);
position: relative;
}
& .step-label {
color: var(--color-neutral-500, #6b7280);
font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
position: absolute;
text-align: center;
top: var(--space-2, 0.5rem);
transform: translateX(-50%);
white-space: nowrap;
}
& .step-label--completed {
color: var(--color-primary-600, #2563eb);
font-weight: var(--font-medium, var(--font-weight-medium, 500));
}
/* Indeterminate progress animation */
.progress--indeterminate & .fill {
animation: var(--ui-progress-animation, progressIndeterminate var(--animation-duration-slowest, 1500ms) infinite);
transform-origin: left;
width: 40% ;
}
/* Progress with stripes */
.progress--striped & .fill {
background-image: linear-gradient(
45deg,
rgb(255 255 255 / 15%) 25%,
transparent 25%,
transparent 50,
rgb(255 255 255 / 15%) 50,
rgb(255 255 255 / 15%) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
}
.progress--animated & .fill {
animation: var(--ui-progress-stripes-animation, progressStripes var(--animation-duration-slowest, 1000ms) var(--ease-linear, linear) infinite);
}
/* Progress with value inside */
.progress--with-value-inside {
position: relative;
}
& .value-inside {
color: var(--color-text-inverse, white);
font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
font-weight: var(--font-medium, var(--font-weight-medium, 500));
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50);
z-index: 1;
}
/* Buffer progress */
.progress--buffer {
background-color: transparent;
}
& .buffer {
background-color: var(--color-neutral-300, #d1d5db);
border-radius: var(--radius-full, 9999px);
height: 100%;
left: 0%;
position: absolute;
top: 0%;
transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
}
.progress--buffer & .fill {
z-index: 1;
}
/* Gradient progress */
.progress--gradient & .fill {
background: linear-gradient(
90deg,
var(--color-primary-400, #60a5fa),
var(--color-primary-600, #2563eb)
);
}
.progress--gradient.progress--success & .fill {
background: linear-gradient(
90deg,
var(--color-success-400, #34d399),
var(--color-success-600, #059669)
);
}
.progress--gradient.progress--warning & .fill {
background: linear-gradient(
90deg,
var(--color-warning-400, #fbbf24),
var(--color-warning-600, #d97706)
);
}
.progress--gradient.progress--danger & .fill {
background: linear-gradient(
90deg,
var(--color-error-400, #f87171),
var(--color-error-600, #dc2626)
);
}
}