.container|
    |
    a.fas.fa-arrow-alt-circle-down.btn(href= '#succes')
        span.txt Download
    #succes|
        |
        a.fas.fa-times-circle(href= '#')
        .fas.fa-check.status
            span.txt Done
        .loader
|
|
a.me(href='https://codepen.io/uzcho_/pens/popular/?grid_type=list' target='_blank')

*{
    font: 400 16px 'Signika'
}

body{
    @include _flexbox($n, $rw, $n, $c)
}

.container{
    padding: 64px;
    position: $rl
}

.btn, .status{
    padding: 8px 16px;
    color: #fff;
    border-radius: 4px
}

.btn{
    background: #2f4ad0;
    box-shadow: 0 8px 6px -6px #555;
    transition: all .4s ease;
    &:hover{
        letter-spacing: 2px;
        box-shadow: $no
    }
}

.txt{
    margin-left: 10px
}

#succes, .loader{
    background: #fff;
    @include _dimension(100%);
    position: $ab;
    z-index: 1
}

#succes{
    @include _offset(50%, $n, $n, 50%);
    @include _flexbox($n, $rw, $n, $c);
    transform: translate(-50%, -50%) scale(0, 0);
    a{
        @include _offset(8px, 8px, $n, $n);
        position: $ab;
        color: #000
    }
}

.status{
    background: #2fb65a
}

.loader{
    @include _offset(0, $n, $n, 0);
    visibility: hidden;
    @include _pseudo-uncomplete($bfaf, $bl){
        left: 0
    }
    #{$bf}{
        @include _dimension(100%);
        top: 0;
        @include _flexbox($n, $rnw, $c, $n, $c);
        font-size: 20px
    }
    #{$af}{
        @include _solid-box(#2fb65a, $n, $n, $n, 0, $n, 0, 3px)
    }
}

#succes:target{
    transform: translate(-50%, -50%) scale(1, 1);
    .loader{
        @include _animation(show, 10s linear, to){
            visibility: visible
        }
        #{$bf}{
            @include _animation(percent, 10s linear, x){
                @for $i from 0 through 100{
                    #{$i * 100 / 100}%{
                        content: '#{$i}%'
                    }
                }
            }
        }
        #{$af}{
            @include _animation(load, 10s linear, x){
                @for $i from 0 through 100{
                    #{$i * 100 / 100}%{
                        width: #{$i + '%'}
                    }
                }
            }
        }
    }
}