preloader circle as text (css)

P.S.:

the generated code is.:

<style>
#fountainTextG{
width:240px;
}

.fountainTextG{
color:#000000;
font-family:Arial Black;
font-size:25px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
-moz-animation-name:bounce_fountainTextG;
-moz-animation-duration:1.43s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.5);
-webkit-animation-name:bounce_fountainTextG;
-webkit-animation-duration:1.43s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.5);
-ms-animation-name:bounce_fountainTextG;
-ms-animation-duration:1.43s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.5);
-o-animation-name:bounce_fountainTextG;
-o-animation-duration:1.43s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.5);
animation-name:bounce_fountainTextG;
animation-duration:1.43s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.5);
}

#fountainTextG_1{
-moz-animation-delay:0.44s;
-webkit-animation-delay:0.44s;
-ms-animation-delay:0.44s;
-o-animation-delay:0.44s;
animation-delay:0.44s;
}

#fountainTextG_2{
-moz-animation-delay:0.55s;
-webkit-animation-delay:0.55s;
-ms-animation-delay:0.55s;
-o-animation-delay:0.55s;
animation-delay:0.55s;
}

#fountainTextG_3{
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}

#fountainTextG_4{
-moz-animation-delay:0.77s;
-webkit-animation-delay:0.77s;
-ms-animation-delay:0.77s;
-o-animation-delay:0.77s;
animation-delay:0.77s;
}

#fountainTextG_5{
-moz-animation-delay:0.88s;
-webkit-animation-delay:0.88s;
-ms-animation-delay:0.88s;
-o-animation-delay:0.88s;
animation-delay:0.88s;
}

#fountainTextG_6{
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-ms-animation-delay:0.99s;
-o-animation-delay:0.99s;
animation-delay:0.99s;
}

#fountainTextG_7{
-moz-animation-delay:1.1s;
-webkit-animation-delay:1.1s;
-ms-animation-delay:1.1s;
-o-animation-delay:1.1s;
animation-delay:1.1s;
}

#fountainTextG_8{
-moz-animation-delay:1.21s;
-webkit-animation-delay:1.21s;
-ms-animation-delay:1.21s;
-o-animation-delay:1.21s;
animation-delay:1.21s;
}

#fountainTextG_9{
-moz-animation-delay:1.32s;
-webkit-animation-delay:1.32s;
-ms-animation-delay:1.32s;
-o-animation-delay:1.32s;
animation-delay:1.32s;
}

@-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:#000000;
}

100%{
-moz-transform:scale(.5);
color:#FFFFFF;
}

}

@-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:#000000;
}

100%{
-webkit-transform:scale(.5);
color:#FFFFFF;
}

}

@-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:#000000;
}

100%{
-ms-transform:scale(.5);
color:#FFFFFF;
}

}

@-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:#000000;
}

100%{
-o-transform:scale(.5);
color:#FFFFFF;
}

}

@keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:#000000;
}

100%{
transform:scale(.5);
color:#FFFFFF;
}

}

</style>
<div id=”fountainTextG”>
<div id=”fountainTextG_1″ class=”fountainTextG”>
Н</div>
<div id=”fountainTextG_2″ class=”fountainTextG”>
О</div>
<div id=”fountainTextG_3″ class=”fountainTextG”>
Н</div>
<div id=”fountainTextG_4″ class=”fountainTextG”>
П</div>
<div id=”fountainTextG_5″ class=”fountainTextG”>
А</div>
<div id=”fountainTextG_6″ class=”fountainTextG”>
Р</div>
<div id=”fountainTextG_7″ class=”fountainTextG”>
Д</div>
<div id=”fountainTextG_8″ class=”fountainTextG”>
О</div>
<div id=”fountainTextG_9″ class=”fountainTextG”>
Н</div>
</div> – See more at: http://cssload.net/en/animated_text#sthash.aey5LAKe.dpuf