Drip Loading indicator

Single element water droplet loading indicator

by Eskel

HTML

<div class="loading-icon"><span></span></div>

CSS

html {background: #000;}
@-webkit-keyframes loading-before {
    0% {
        opacity: 0;
    }   
    29% { 
        opacity: 0;
    }
    30% {
        width: 0;
        height: 0;
        opacity: .9;
        left: 50%;
        top: 0%;
        border-width: 2px;
        border-top-width: 0px;
    }
    100% {
        width: 100%;
        height: 200%;
        opacity: 0;
        left: -25%;
        top: -125%;
        border-width: 25px;
        border-top-width: 5px;
    }
}

@-webkit-keyframes loading-after {
    0% {
        top: -200%;
        opacity: 0;
        width: 5px;
        height: 10px;
    }
    30% {
        opacity: 1;
    }
    40% {
        width: 15px;
        height: 15px;
        top: 10%;
    }
    100% {
       top: 10%;
    }
}

.loading-icon {
    background: #000;

    width: 100px;
    height: 50px;
    margin: auto;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;

    text-align: center;
}
.loading-icon span {
    display: inline-block;
    padding-top: 20px;

    color: #4b505c;
    font: normal normal bold 15px sans-serif;
    text-align: center;
    letter-spacing: 1px;
}

.loading-icon:before, .loading-icon:after {
    position: absolute;
    content: '';
}
.loading-icon:before {
    width: 0;
    height: 0;
    opacity: 0;
    left: 25%;
    top: -50%;

    border-style: double;
    border-color: #4b505c;
    border-radius: 100%;
    
    transform: rotateX(75deg);
    -webkit-transform: rotateX(75deg);
    
    -webkit-animation: loading-before 2s infinite ease-out;
}
.loading-icon:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #4b505c;

    top: -50px;
    left: 42px;
    z-index: -1;
    
    -webkit-animation: loading-after 2s infinite ease-in;
}