.blinking-cursor{
    animation:blinkingCursor 1.25s infinite;
}
@keyframes blinkingCursor{
    0%{   color: transparent; }
    24%{   color: transparent; }
    25%{  color: #ccc; }
    75%{  color: #ccc; }
    76%{   color: transparent; }
    100%{ color: transparent; }
}

.loader {
    position: absolute
}

.loader.pipe {
    top: 5px;
    font-size: 12px;
    margin-left: 2px;
}

.loader-0-3 {
    animation:loader0-3 0.5s infinite;
}
@keyframes loader0-3 {
    0%{   color: #ccc; }
    24%{  color: #ccc; }
    25%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-1-3 {
    animation:loader1-3 0.5s infinite;
}
@keyframes loader1-3 {
    0%{   color: transparent; }
    24%{  color: transparent; }
    25%{  color: #ccc; }
    49%{  color: #ccc; }
    50%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-2-3 {
    animation:loader2-3 0.5s infinite;
}
@keyframes loader2-3 {
    0%{   color: transparent; }
    49%{  color: transparent; }
    50%{  color: #ccc; }
    74%{  color: #ccc; }
    75%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-3-3 {
    animation:loader3-3 0.5s infinite;
}
@keyframes loader3-3 {
    0%{   color: transparent; }
    74%{  color: transparent; }
    75%{  color: #ccc; }
    100%{ color: #ccc; }
}

/* <span class="blinking-cursor">&#x258a;</span> */

.loader-0-9 {
    animation:loader0-9 1s infinite;
}
@keyframes loader0-9 {
    0%{   color: #ccc; }
    9%{  color: #ccc; }
    10%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-1-9 {
    animation:loader1-9 1s infinite;
}
@keyframes loader1-9 {
    0%{   color: transparent; }
    9%{  color: transparent; }
    10%{  color: #ccc; }
    19%{  color: #ccc; }
    20%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-2-9 {
    animation:loader2-9 1s infinite;
}
@keyframes loader2-9 {
    0%{   color: transparent; }
    19%{  color: transparent; }
    20%{  color: #ccc; }
    29%{  color: #ccc; }
    30%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-3-9 {
    animation:loader3-9 1s infinite;
}
@keyframes loader3-9 {
    0%{   color: transparent; }
    29%{  color: transparent; }
    30%{  color: #ccc; }
    39%{ color: #ccc; }
    40%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-4-9 {
    animation:loader4-9 1s infinite;
}
@keyframes loader4-9 {
    0%{   color: transparent; }
    39%{  color: transparent; }
    40%{  color: #ccc; }
    49%{ color: #ccc; }
    50%{ color: transparent; }
    100%{ color: transparent; }
}


.loader-5-9 {
    animation:loader5-9 1s infinite;
}
@keyframes loader5-9 {
    0%{   color: transparent; }
    49%{  color: transparent; }
    50%{  color: #ccc; }
    59%{ color: #ccc; }
    60%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-6-9 {
    animation:loader6-9 1s infinite;
}
@keyframes loader6-9 {
    0%{   color: transparent; }
    59%{  color: transparent; }
    60%{  color: #ccc; }
    69%{ color: #ccc; }
    70%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-7-9 {
    animation:loader7-9 1s infinite;
}
@keyframes loader7-9 {
    0%{   color: transparent; }
    69%{  color: transparent; }
    70%{  color: #ccc; }
    79%{ color: #ccc; }
    80%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-8-9 {
    animation:loader8-9 1s infinite;
}
@keyframes loader8-9 {
    0%{   color: transparent; }
    79%{  color: transparent; }
    80%{  color: #ccc; }
    89%{ color: #ccc; }
    90%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-9-9 {
    animation:loader9-9 1s infinite;
}
@keyframes loader9-9 {
    0%{   color: transparent; }
    89%{  color: transparent; }
    90%{  color: #ccc; }
    100%{ color: #ccc; }
}

/* 0-4 */


.loader-0-4 {
    animation:loader0-4 0.5s infinite;
}
@keyframes loader0-4 {
    0%{   color: #ccc; }
    19%{  color: #ccc; }
    20%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-1-4 {
    animation:loader1-4 0.5s infinite;
}
@keyframes loader1-4 {
    0%{   color: transparent; }
    19%{  color: transparent; }
    20%{  color: #ccc; }
    39%{  color: #ccc; }
    40%{  color: transparent; }
    100%{ color: transparent; }
}

.loader-2-4 {
    animation:loader2-4 0.5s infinite;
}
@keyframes loader2-4 {
    0%{   color: transparent; }
    39%{  color: transparent; }
    40%{  color: #ccc; }
    59%{  color: #ccc; }
    60%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-3-4 {
    animation:loader3-4 0.5s infinite;
}
@keyframes loader3-4 {
    0%{   color: transparent; }
    59%{  color: transparent; }
    60%{  color: #ccc; }
    79%{ color: #ccc; }
    80%{ color: transparent; }
    100%{ color: transparent; }
}

.loader-4-4 {
    animation:loader4-4 0.5s infinite;
}
@keyframes loader4-4 {
    0%{   color: transparent; }
    79%{  color: transparent; }
    80%{  color: #ccc; }
    100%{ color: #ccc; }
}