pre.hourglass::before{ 
            content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\:::::::/|\A | \\:::::/ |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/   :   \\|\A |\\   :   /|\A | qOOOOOp |\A=8=========8="; 
            animation: hourglassanimate infinite 2s; 
            padding-left: 10px; 
        } 
 
 
 
         @keyframes hourglassanimate { 
  
            12% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\:.. ..:/|\A | \\:::::/ |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/   :   \\|\A |\\ .:::. /|\A | qOOOOOp |\A=8=========8="; 
            } 
  
            25% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\..   ../|\A | \\:::::/ |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/   :   \\|\A |\\.:::::./|\A | qOOOOOp |\A=8=========8="; 
            } 
  
            37% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\:...:/ |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/  .:.  \\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 
            
            50% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\...../ |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/ .:::. \\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 
            62% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\     / |\A |  \\:::/  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/.:::::.\\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 
            75% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\     / |\A |  \\.../  |\A |   x:x   |\A |  / : \\  |\A | /  :  \\ |\A |/:::::::\\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 
            87% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\     / |\A |  \\   /  |\A |   x:x   |\A |  / : \\  |\A | / .:. \\ |\A |/:::::::\\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 
            100% {
                white-space:pre;
                content: "=8=========8=\A | dOOOOOb |\A |/       \\|\A |\\       /|\A | \\     / |\A |  \\   /  |\A |   x x   |\A |  /   \\  |\A | /..:..\\ |\A |/:::::::\\|\A |\\:::::::/|\A | qOOOOOp |\A=8=========8="; 
            } 

        }