.pulsating-circle {
    margin:20px 0 20px 10px;
    position: relative;
    transform: translateX(-50%) translateY(-50%);
    width: 8px;
    height: 8px;
}

    .pulsating-circle:before {
        content: "";
        position: relative;
        display: block;
        width: 300%;
        height: 300%;
        box-sizing: border-box;
        margin-left: -100%;
        margin-top: -150%;
        border-radius: 45px;
        background-color: #01a4e9;
        -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }

    .pulsating-circle:after {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        display: block;
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
        animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
    }

@-webkit-keyframes pulse-ring {
    0% {
        transform: scale(0.33);
    }

    80%, 100% {
        opacity: 0;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.33);
    }

    80%, 100% {
        opacity: 0;
    }
}

@-webkit-keyframes pulse-dot {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}



.barber {
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 1rem, #f9f9f9 1rem, #f9f9f9 2rem );
    background-size: 200% 200%;
    animation: barberpole 20s linear infinite;
    display:inline-block;
}

@keyframes barberpole {
    100% {
        background-position: 100% 100%;
    }
}