loader animation

<div class="speaker" aria-hidden="true"></div>

@keyframes scale {
    to {
        transform: scale(1.02)
    }
}

.speaker,.speaker::after,.speaker::before {
    border-radius: 50%;
    position: absolute;
    display: block
}

.speaker {
    height: 128px;
    width: 128px;
    top: 50%;
    left: 50%;
    margin-left: -64px;
    margin-top: -64px;
    box-shadow: 0 0 0 4px #333;
    background: #333
}

.speaker::after,.speaker::before {
    animation: scale .2s steps(2,end) infinite;
    text-align: center
}

.speaker::after {
    background: #968989;
    color: #fff;
    text-shadow: 0 1px #000;
    line-height: 48px;
    left: 50%;
    margin-left: -24px;
    content: "Ω";
    height: 48px;
    width: 48px;
    top: 40px;
    box-shadow: 0-20px 10px 2px #585151 inset,0 0 20px 0#000 inset,0 0 0 2px #665c5c,0 20px 40px 0#d8c2c2
}

.speaker::before {
    content: "";
    background: #363333;
    height: 128px;
    width: 128px;
    top: 0;
    box-shadow: 0 2px 2px 0#aaa inset,0-2px 2px 0#aaa inset,0 0 1px 8px #000 inset,0-1px 2px 9px #aaa inset,0 1px 5px 9px #111 inset
}