Untitled

dabblet.css

.b-pulse_default
{
    font-size: 60px;
	
    display:block;
    margin: 0 auto;
    width: 1em;
    height: 1em;

    line-height: .82em;

    position: relative;

}

.b-pulse_default
{
    -webkit-transition: opacity .5s .3s;
       -moz-transition: opacity .5s .3s;
         -o-transition: opacity .5s .3s;
            transition: opacity .5s .3s;
}

.b-pulse_hidden
{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
}

.b-pulse_default .b-pulse__i
{
    width: 0;
    vertical-align: middle;
    opacity: .4;

    height: .32em;
    font-size: inherit;
    border: .1em solid;

    -webkit-animation: b-pulse_default .8s infinite linear;
       -moz-animation: b-pulse_default .8s infinite linear;
            animation: b-pulse_default .8s infinite linear;

    -webkit-box-shadow: 0 1px 1px 1px rgba(255,255,255,1);
       -moz-box-shadow: 0 1px 1px 1px rgba(255,255,255,1);
            box-shadow: 0 1px 1px 1px rgba(255,255,255,1);

    -webkit-border-radius: 100em;
       -moz-border-radius: 100em;
            border-radius: 100em;

    display: inline-block;
    zoom: 1;
}

.ie9 .b-pulse_default .b-pulse__i
{
    border: .11em solid;
}

.csstransitions.no-cssanimations .b-pulse_default .b-pulse__i
{
    -webkit-transition: height .1s, opacity .2s;
       -moz-transition: height .1s, opacity .2s;
         -o-transition: height .1s, opacity .2s;
            transition: height .1s, opacity .2s;
}

.b-pulse_default .b-pulse__i_first
{
    left: 0;
    -webkit-animation-delay: 0.1s;
       -moz-animation-delay: 0.1s;
            animation-delay: 0.1s;
}

.b-pulse_default .b-pulse__i_second
{
    margin-left: 10%;
    -webkit-animation-delay: 0.2s;
       -moz-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

.b-pulse_default .b-pulse__i_third
{
    margin-left: 10%;
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.b-pulse_hidden .b-pulse__i
{
    -webkit-animation: none;
       -moz-animation: none;
            animation: none;
}

@-moz-keyframes b-pulse_default
{
    10% { opacity: .9; height: .78em; }
    60% { height: .32em; }
    to { opacity: .4; }
}

@-webkit-keyframes b-pulse_default
{
    10% { opacity: .9; height: .8em; }
    60% { height: .32em; }
    to { opacity: .4; }
}

@-webkit-keyframes b-pulse_default
{
    10% { opacity: .9; height: .8em; }
    60% { height: .32em; }
    to { opacity: .4; }
}

.b-pulse_step-1 .b-pulse__i_first,
.b-pulse_step-2 .b-pulse__i_second,
.b-pulse_step-3 .b-pulse__i_third
{
    height: .7em;
    opacity: 0.9;
}

.ie9 .b-pulse_step-2 .b-pulse__i_first,
.ie9 .b-pulse_step-3 .b-pulse__i_second,
.ie9 .b-pulse_step-4 .b-pulse__i_third
{
    height: .52em;
    opacity: 0.6;
}

.ie9 .b-pulse_step-3 .b-pulse__i_first,
.ie9 .b-pulse_step-4 .b-pulse__i_second,
.ie9 .b-pulse_step-5 .b-pulse__i_third
{
    height: .40em;
    opacity: 0.5;
}

dabblet.html

<span class="b-pulse b-pulse_default">  
        <span class="b-pulse__i b-pulse__i_first"></span><span class="b-pulse__i b-pulse__i_second"></span><span class="b-pulse__i b-pulse__i_third"></span>
    </span>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}