<div class="wlan-search">
    <div>
        <svg class="top" viewBox="0 0 40 40">
            <path d="M4,14 C9.33333333,10 14.6666667,8 20,8 C25.3333333,8 30.6666667,10 36,14"></path>
        </svg>
        <svg class="middle" viewBox="0 0 40 40">
            <path d="M9,19 C12.6666667,16.3333333 16.3333333,15 20,15 C23.6666667,15 27.3333333,16.3333333 31,19"></path>
        </svg>
        <svg class="bottom" viewBox="0 0 40 40">
            <path d="M13,24 C15.3333333,22.1666667 17.6666667,21.25 20,21.25 C22.3333333,21.25 24.6666667,22.1666667 27,24"></path>
        </svg>
    </div>
</div>

<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/10070599-WLAN-Search-animation" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.wlan-search {
    --color: #fff;
    --background: #1E2235;
    position: relative;
    border-radius: 50%;
    padding: 24px;
    background: var(--background);
    div {
        position: relative;
        animation: div 2.5s linear infinite;
        svg {
            width: 40px;
            height: 40px;
            display: block;
            fill: none;
            stroke: var(--color);
            stroke-linecap: round;
            stroke-width: var(--sw, 3.5);
            animation: var(--name, top) 2.5s linear infinite;
            &:not(:first-child) {
                left: 0;
                top: 0;
                position: absolute;
            }
            &.middle {
                --sw: 3;
                --name: middle;
                transform-origin: 50% 67%;
            }
            &.bottom {
                --sw: 3;
                --name: bottom;
            }
        }
        &:after {
            content: '';
            width: 8px;
            height: 8px;
            top: 26px;
            left: 16px;
            border-radius: 50%;
            background: var(--color);
            position: absolute;
            animation: dot 2.5s linear infinite;
            transform: scale(.9);
        }
    }
}

@keyframes div {
    9%,
    53% {
        transform: translateY(-5px);
    }
    60%,
    100% {
        transform: none;
    }
}

@keyframes top {
    9%,
    14% {
        transform: translateY(9px);
    }
    20%,
    51%,
    53% {
        transform: translateY(8px);
    }
    27%,
    29% {
        transform: translate(-7px, 7px);
    }
    35%,
    37% {
        transform: translateY(7px);
    }
    43%,
    45% {
        transform: translate(7px, 7px);
    }
    60%,
    100% {
        transform: none;
    }
}

@keyframes middle {
    9%,
    14% {
        transform: translateY(-4px) rotate(180deg);
    }
    20%,
    51%,
    53% {
        transform: translateY(-2px) rotate(180deg);
    }
    27%,
    29% {
        transform: translate(-6px, -3px) rotate(180deg);
    }
    35%,
    37% {
        transform: translateY(-5px) rotate(180deg);
    }
    43%,
    45% {
        transform: translate(6px, -3px) rotate(180deg);
    }
    60%,
    100% {
        transform: none;
    }
}

@keyframes bottom {
    9%,
    14%,
    51%,
    53% {
        transform: translateY(1px);
    }
    27%,
    29% {
        transform: translate(-8px, 0);
    }
    35%,
    37% {
        transform: translateY(-1px);
    }
    43%,
    45% {
        transform: translate(8px, 0);
    }
    20%,
    60%,
    100% {
        transform: none;
    }
}

@keyframes dot {
    9%,
    14% {
        transform: scale(.9) translateY(-1px);
    }
    20%,
    51%,
    53% {
        transform: scale(.9) translateY(-2px);
    }
    27%,
    29% {
        transform: scale(.9) translate(-12px, -2px);
    }
    35%,
    37% {
        transform: scale(.9) translateY(-4px);
    }
    43%,
    45% {
        transform: scale(.9) translate(12px, -2px);
    }
    60%,
    100% {
        transform: scale(.9);
    }
}

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

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

// dribbble & twitter
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #6D58FF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            width: 76px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 112px;
        bottom: 14px;
        svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
    }
}