cirrus-ui/src/components/progress.scss

A lightweight UI framework written in SCSS

@use 'sass:map';
@use '../src/internal' as *;

@if should-generate-classes($PROGRESS) {
    $progress-primary: fill('primary');
    $progress-background: fill('gray', '200');
    $progress-border-radius: 0.25rem;

    .progress {
        --progress-color: #{$progress-primary};

        background-color: $progress-background;
        border: none;
        border-radius: $progress-border-radius;
        overflow: hidden;
        padding: 0;
        width: 100%;

        @include explode-properties(map.get($progress-bar-sizes, $md));

        &::-webkit-progress-bar {
            background-color: transparent;
        }
        &::-webkit-progress-value {
            background-color: var(--progress-color);
        }
        &::-moz-progress-bar {
            background-color: var(--progress-color);
        }
        &::-ms-fill {
            background-color: var(--progress-color);
            border: none;
        }

        // Sizes
        @each $class, $property-map in $progress-bar-sizes {
            &.progress--#{$class} {
                @include explode-properties($property-map);
            }
        }

        // Themes
        @each $class, $color in $control-themes {
            &.progress--#{$class} {
                --progress-color: #{map.get($color, bg)};
            }
        }

        &:indeterminate {
            animation: progress-indeterminate 1.5s linear infinite;
            background: $progress-background
                linear-gradient(to right, var(--progress-color) 30%, $progress-background 30%)
                top
                left /
                150%
                150%
                no-repeat;

            &::-webkit-progress-bar {
                --progress-color: transparent;
            }
            &::-moz-progress-bar {
                --progress-color: transparent;
            }
            &::-ms-fill {
                animation-name: none;
            }
        }
    }

    @keyframes progress-indeterminate {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
}