button(class='order')
  span(class='default') Complete Order
  span(class='success') Order Placed
    svg(viewbox='0 0 12 10')
      polyline(points='1.5 6 4.5 9 10.5 1')
  div(class='box')
  div(class='drone')
    svg(class='wing left')
      use(xlink:href='#droneWing')
    svg(class='wing right')
      use(xlink:href='#droneWing')
    svg(class='body')
      use(xlink:href='#droneBody')
    svg(class='grab')
      use(xlink:href='#droneGrab')

svg(xmlns='http://www.w3.org/2000/svg' style='display: none;')
  symbol(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 14' id='droneBody' fill='currentColor' stroke='none')
    path(d='M38,0.5 C38,0.223857625 38.2238576,5.07265313e-17 38.5,0 C38.7761424,-5.07265313e-17 39,0.223857625 39,0.5 L39,4 C39.5522847,4 40,4.44771525 40,5 L40,6 L40.5,6 C41.3284271,6 42,6.67157288 42,7.5 C42,8.32842712 41.3284271,9 40.5,9 L30,9 L30,9.86761924 C30,10.5701449 29.6314023,11.2211586 29.0289915,11.5826051 L25.4750236,13.7149859 C25.1641928,13.9014843 24.80852,14 24.4460321,14 L17.5539679,14 C17.19148,14 16.8358072,13.9014843 16.5249764,13.7149859 L12.9710085,11.5826051 C12.3685977,11.2211586 12,10.5701449 12,9.86761924 L12,9 L1.5,9 C0.671572875,9 1.01453063e-16,8.32842712 0,7.5 C-1.01453063e-16,6.67157288 0.671572875,6 1.5,6 L2,6 L2,5 C2,4.44771525 2.44771525,4 3,4 L3,0.5 C3,0.223857625 3.22385763,5.07265313e-17 3.5,0 C3.77614237,-5.07265313e-17 4,0.223857625 4,0.5 L4,4 C4.55228475,4 5,4.44771525 5,5 L5,6 L12.005,6 L12.0064818,5.97128221 C12.0580908,5.33141252 12.414937,4.75103782 12.9710085,4.41739491 L16.5249764,2.28501415 C16.8358072,2.09851567 17.19148,2 17.5539679,2 L24.4460321,2 C24.80852,2 25.1641928,2.09851567 25.4750236,2.28501415 L29.0289915,4.41739491 C29.5934099,4.75604592 29.952577,5.34889137 29.9956355,6.0001358 L37,6 L37,5 C37,4.44771525 37.4477153,4 38,4 L38,0.5 Z')
  symbol(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14' id='droneGrab' fill='none' stroke='currentColor')
    path(d='M5,13 L1,13 C1,7.66666667 3.33333333,3.66666667 8,1 L17.996238,1 C22.6654127,3 25,7 25,13 L21.0005587,13' stroke-width='2' stroke-linecap='round')
  symbol(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 2' id='droneWing' fill='currentColor' stroke='none')
    path(d='M13,2 C12.4477153,2 12,1.55228475 12,1 C12,0.44771525 12.4477153,0 13,0 C13.5522847,0 21,0.44771525 21,1 C21,1.55228475 13.5522847,2 13,2 Z')
    path(d='M8,2 C7.44771525,2 0,1.55228475 0,1 C0,0.44771525 7.44771525,0 8,0 C8.55228475,0 9,0.44771525 9,1 C9,1.55228475 8.55228475,2 8,2 Z')
    
<!-- dribbble -->
a(class='dribbble' href='https://dribbble.com/shots/7126460-Order-confirm-animation-2' target='_blank')
  img(src='https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg')

:root {
    --primary: #275EFE;
    --primary-dark: #2850C4;
    --primary-light: #668DFF;
    --dark: #1C212E;
    --white: #FFF;
    --green: #16BF78;
    --sand: #DCB773;
}

.order {
    appearance: none;
    border: 0;
    background: var(--white);
    position: relative;
    height: 63px;
    width: 240px;
    padding: 0;
    cursor: pointer;
    border-radius: 32px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: transform .3s ease;
    span {
        --y: 0;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        top: 19px;
        line-height: 24px;
        color: var(--dark);
        font-size: 16px;
        font-weight: 500;
        transform: translateY(var(--y));
        &.default {
            transition-delay: .3s;
            transition: opacity .3s ease .3s;
        }
        &.success {
            --y: 60px;
            transition: transform .5s ease;
            svg {
                width: 12px;
                height: 10px;
                display: inline-block;
                vertical-align: top;
                fill: none;
                margin: 7px 0 0 4px;
                stroke: var(--green);
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 16px;
                stroke-dashoffset: 16px;
                transition: stroke-dashoffset .3s ease;
            }
        }
    }
    &:active {
        transform: scale(.94);
    }
    .box,
    .drone {
        position: absolute;
    }
    .box {
        width: 20px;
        height: 20px;
        left: 50%;
        margin-left: -10px;
        top: 100%;
        border-radius: 2px;
        background: var(--sand);
        &:before,
        &:after {
            content: '';
            position: absolute;
            display: block;
            left: 5px;
        }
        &:before {
            top: 0;
            width: 4px;
            height: 9px;
            background: rgba(255, 255, 255, .3);
        }
        &:after {
            z-index: 1;
            top: 7px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 2px 2px 2px;
            border-color: transparent transparent var(--sand) transparent;
        }
    }
    .drone {
        width: 42px;
        height: 14px;
        z-index: 1;
        top: 16px;
        right: 100%;
        transform: translateX(-7px);
        svg {
            display: block;
            &.body {
                width: 42px;
                height: 14px;
                position: relative;
                z-index: 1;
                color: var(--primary);
            }
            &.wing {
                position: absolute;
                width: 21px;
                height: 2px;
                top: 1px;
                color: var(--primary-light);
                &.left {
                    left: -7px;
                }
                &.right {
                    right: -7px;
                }
            }
            &.grab {
                position: absolute;
                width: 26px;
                height: 14px;
                left: 8px;
                top: 10px;
                color: var(--primary-dark);
                stroke-dashoffset: 34px;
                stroke-dasharray: 0 48px 19px 48px;
            }
        }
    }
    &.animate {
        .default {
            opacity: 0;
            transition-delay: 0s;
        }
        .success {
            --y: 0;
            transition-delay: 3.85s;
            svg {
                transition-delay: 4.3s;
                stroke-dashoffset: 0;
            }
        }
        .drone {
            animation: move 5s ease forwards;
            .wing {
                animation: wing 5s linear forwards;
            }
            .grab {
                animation: grab .6s ease forwards 2.3s;
            }
        }
        .box {
            animation: box 5s ease forwards;
        }
    }
}

@keyframes move {
    0% {
        transform: translateX(-7px) rotate(14deg);
    }
    55%,
    70% {
        transform: translateX(141px) rotate(0deg);
    }
    100% {
        transform: translateX(141px) translateY(-84px)  rotate(0deg);
    }
}

@keyframes grab {
    100% {
        stroke-dashoffset: 48px;
        stroke-dasharray: 0 48px 48px 48px;
    }
}

@keyframes wing {
    100% {
        transform: rotateY(360deg * 20);
    }
}

@keyframes box {
    0%,
    10% {
        transform: translateY(0);
    }
    55%,
    70% {
        transform: translateY(-28px);
    }
    100% {
        transform: translateY(-112px);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121621;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

$('.order').click(function(e) {

    let button = $(this);

    if(!button.hasClass('animate')) {
        button.addClass('animate');
        setTimeout(() => {
            button.removeClass('animate');
        }, 6500);
    }

});