BetterDiscordApp-v2/client/src/styles/partials/generic/refreshbtn.scss

@keyframes bd-refreshCircleAnimOut {
    0% {
        transform: rotate(0deg);
        stroke-dasharray: 36.5, 200;
        stroke-dashoffset: -7.5;
    }

    80% {
        stroke-dasharray: 36.5, 200;
        stroke-dashoffset: -44;
    }

    100% {
        transform: rotate(360deg);
        stroke-dasharray: 36.5, 200;
        stroke-dashoffset: -44;
    }
}

@keyframes bd-refreshCircleAnimIn {
    0% {
        transform: rotate(-360deg);
        stroke-dasharray: 0, 200;
        stroke-dashoffset: -7.5;
    }

    100% {
        transform: rotate(0deg);
        stroke-dasharray: 36.5, 200;
        stroke-dashoffset: -7.5;
    }
}

@keyframes bd-refreshArrowRotate {
    from {
        transform: rotate(-680deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.bd-refreshButton {
    cursor: pointer;
    height: 31px;
    width: 31px;
    display: block;

    svg,
    svg * {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    svg {
        height: 19px;
        width: 19px;
        margin: 6px;
    }

    .bd-svgRefresh {
        opacity: 1;
    }

    &.bd-refreshed {
        .bd-svgRefresh {
            transition: .5s cubic-bezier(.4, 0, 0, 1) .2s;
        }

        .bd-svgCancelLine {
            &:nth-of-type(1) {
                transform-origin: bottom;
                transition: .5s cubic-bezier(0, 0, 0, 1) .1s, transform-origin 1ms;
            }

            &:nth-of-type(2) {
                transform-origin: left;
                transition: .5s cubic-bezier(0, 0, 0, 1), transform-origin 1ms;
            }
        }

        .bd-svgCircle {
            stroke-dasharray: 36.5, 200;
            stroke-dashoffset: -7.5;
            transform-origin: center;
            animation: bd-refreshCircleAnimIn 1s cubic-bezier(.4, 0, 0, 1);
        }

        .bd-svgArrow {
            transform-origin: center;
            animation: bd-refreshArrowRotate 1s cubic-bezier(.4, 0, 0, 1);
        }
    }

    &.bd-refreshing {
        .bd-svgRefresh {
            transition: .5s cubic-bezier(.4, 0, 0, 1);
            opacity: .3;
        }

        .bd-svgCancelLine {
            opacity: 1;

            &:nth-of-type(1) {
                transform-origin: top;
                transform: scale(1, 1);
                transition: .5s cubic-bezier(0, 0, 0, 1) .4s, transform-origin 1ms;
            }

            &:nth-of-type(2) {
                transform-origin: right;
                transform: scale(1, 1);
                transition: .5s cubic-bezier(0, 0, 0, 1) .3s, transform-origin 1ms;
            }
        }

        .bd-svgCircle {
            stroke-dasharray: 36.5, 200;
            stroke-dashoffset: -44;
            transform-origin: center;
            animation: bd-refreshCircleAnimOut 1s cubic-bezier(.4, 0, 0, 1);
        }

        .bd-svgArrow {
            transform-origin: center;
            transform: rotate(360deg);
            transition: 1s cubic-bezier(.4, 0, 0, 1);
        }

        .bd-svgArrowTriangle {
            transition: .5s ease;
            transform: scale(0);
        }
    }

    .bd-svgCancel {
        transform: rotate(-45deg);
        transform-origin: center;
    }

    .bd-svgCancelLine {
        opacity: .4;

        &:nth-of-type(1) {
            transform: scale(1, 0);
        }

        &:nth-of-type(2) {
            transform: scale(0, 1);
        }
    }

    .bd-svgCircle {
        stroke-dasharray: 36.5, 200;
        stroke-dashoffset: -7.5;
    }

    .bd-svgArrow {
        transform-origin: center;
        transform: rotate(0deg);
    }

    .bd-svgArrowTriangle {
        transform-origin: 17.1px 6.9px;
        transition: .8s ease .2s;
        transform: scale(1);
    }
}