.progress-container
    display: flex
    flex-direction: column

    .progress-wrapper
        display: flex
        align-items: center
        margin-bottom: 10px

        .label
            margin-right: 10px
            width: 80px

        .progress-bar
            height: 20px
            width: 100%
            background-color: #ddd
            position: relative

            &:not(:first-child)
                margin-left: 80px

            &.blue .progress
                background-color: blue
                animation-name: blue-animation

            &.green .progress
                background-color: green
                animation-name: green-animation

            .progress
                height: 100%
                position: absolute
                top: 0
                left: 0
                animation-duration: 2s
                animation-fill-mode: forwards
                animation-timing-function: ease-in-out

@keyframes blue-animation
    from
        width: 0%
    to
        width: 75%

@keyframes green-animation
    from
        width: 0%
    to
        width: 50%