Connected.Components/Styles/components/_progresslinear.scss


.progress-linear {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: block;
        opacity: 0.2;
    }

    &.horizontal {
        width: 100%;

        &.progress-linear {
            &-small {
                height: 4px;
            }

            &-medium {
                height: 8px;
            }

            &-large {
                height: 12px;
            }
        }

        .progress-linear-dashed {
            animation: progress-linear-horizontal-keyframes-buffer 3s infinite linear;
        }
    }

    &.vertical {
        height: 100%;

        &.progress-linear {
            &-small {
                width: 4px;
            }

            &-medium {
                width: 8px;
            }

            &-large {
                width: 12px;
            }
        }
    }

    .progress-linear-content {
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progress-linear-bars {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .progress-linear-bar {
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        position: absolute;
        transition: transform 0.2s linear;
        transform-origin: left;

        &.progress-linear-1-indeterminate {
            &.horizontal {
                width: auto;
                animation: progress-linear-horizontal-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            }

            &.vertical {
                height: auto;
                animation: progress-linear-vertical-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            }
        }

        &.progress-linear-2-indeterminate {
            &.horizontal {
                width: auto;
                animation: progress-linear-horizontal-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
            }

            &.vertical {
                height: auto;
                animation: progress-linear-vertical-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
            }
        }
    }

    &.progress-linear-color-default {
        &:not(.progress-linear-buffer) {
            &::before {
                background-color: var(--palette-action-disabled);
            }

            .progress-linear-bar {
                background-color: var(--palette-action-default);
            }
        }

        &.progress-linear-buffer {
            .progress-linear-bar:first-child {
                background-size: 10px 10px;
                background-image: radial-gradient(var(--palette-action-disabled) 0%, var(--palette-action-disabled) 16%, transparent 42%);
                background-position: 0 -23px;
            }

            .progress-linear-bar:nth-child(2) {
                background-color: var(--palette-action-default);
            }

            .progress-linear-bar:last-child {
                transition: transform .4s linear;

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    display: block;
                    opacity: 0.4;
                    background-color: var(--palette-action-disabled);
                }
            }
        }
    }

    @each $color in $palette-colors {
        &.progress-linear-color-#{$color} {

            &:not(.progress-linear-buffer) {
                &::before {
                    background-color: var(--palette-#{$color});
                }

                .progress-linear-bar {
                    background-color: var(--palette-#{$color});
                }
            }


            &.progress-linear-buffer {
                .progress-linear-bar:first-child {
                    background-size: 10px 10px;
                    background-image: radial-gradient(var(--palette-#{$color}) 0%, var(--palette-#{$color}) 16%, transparent 42%);
                    background-position: 0 -23px;
                }

                .progress-linear-bar:nth-child(2) {
                    background-color: var(--palette-#{$color});
                }

                .progress-linear-bar:last-child {
                    transition: transform .4s linear;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        display: block;
                        opacity: 0.4;
                        background-color: var(--palette-#{$color});
                    }
                }
            }
        }
    }

    &.progress-indeterminate {
        &.horizontal {
            .progress-linear-bar:first-child {
                width: auto;
                animation: progress-linear-horizontal-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            }

            .progress-linear-bar:last-child {
                width: auto;
                animation: progress-linear-horizontal-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
            }
        }

        &.vertical {
            .progress-linear-bar:first-child {
                height: auto;
                animation: progress-linear-vertical-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            }

            .progress-linear-bar:last-child {
                height: auto;
                animation: progress-linear-vertical-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
            }
        }
    }

    &.progress-linear-buffer {
        .progress-linear-bar:first-child {
            width: 100%;
            height: 100%;
            position: absolute;
            margin-top: 0;
        }

        .progress-linear-bar:nth-child(2) {
            z-index: 1;
            transition: transform .4s linear;
        }

        &.horizontal {
            .progress-linear-bar:first-child {
                animation: progress-linear-horizontal-keyframes-buffer 3s infinite linear;
            }
        }

        &.vertical {
            .progress-linear-bar:first-child {
                animation: progress-linear-vertical-keyframes-buffer 3s infinite linear;
            }
        }
    }

    &.progress-linear-striped {
        .progress-linear-bar {
            background-image: linear-gradient( 135deg,hsla(0,0%,100%,.25) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.25) 0,hsla(0,0%,100%,.25) 75%,transparent 0,transparent);
            background-size: 40px 40px;
            background-repeat: repeat;
            animation: progress-linear-striped-loading 10s linear infinite;
        }
    }

    &.progress-linear-rounded {
        border-radius: var(--default-borderradius);

        .progress-linear-bars {
            border-radius: var(--default-borderradius);
        }

        .progress-linear-bar {
            border-radius: var(--default-borderradius);
        }
    }
}