[data-rs-progress] {
position: relative;
width: 100%;
height: var(--progress-height);
overflow: hidden;
border-radius: var(--progress-radius);
background: var(--progress-bg);
}
[data-rs-progress-indicator] {
height: 100%;
width: 100%;
transition: transform var(--progress-transition-duration) var(--progress-transition-ease);
background: var(--progress-fill-bg);
}
[data-rs-progress][data-rs-state~="indeterminate"] [data-rs-progress-indicator] {
animation: progress-indeterminate 1.8s ease-in-out infinite;
width: 40%;
}
@keyframes progress-indeterminate {
0% { transform: translateX(-150%); }
50% { transform: translateX(200%); }
100% { transform: translateX(-150%); }
}
[data-rs-progress][data-rs-state~="loading"] [data-rs-progress-indicator] {
animation: progress-loading 1s var(--motion-ease-standard) infinite;
width: 30%;
}
@keyframes progress-loading {
0% { transform: translateX(-100%); opacity: 0.6; }
50% { opacity: 1; }
100% { transform: translateX(400%); opacity: 0.6; }
}