Animated text in pure css and html

Create a div tag in your body

css code in your head section

-----------------------------------------------------------------------------------------------------------------
.cssload-loader{
    position: relative;
    width: 146px;
    height: 19px;
    left: 25%;
    left: calc(50% - 73px);
        left: -o-calc(50% - 73px);
        left: -ms-calc(50% - 73px);
        left: -webkit-calc(50% - 73px);
        left: -moz-calc(50% - 73px);
}

.cssload-loader:after{
    content: "Please wait...";
    text-transform:uppercase;
    color: rgb(0,0,0);
    font-family:    Lato,"Helvetica Neue" ;
    font-weight: 200;
    font-size: 16px;
    position: absolute;
    width: 100%;
    height: 19px;
    line-height: 19px;
    left: 0;
    top: 0;
    background-color: rgb(231,76,60);
    z-index: 1;
}

.cssload-loader:before{
    content: "";
    position: absolute;
    background-color: rgb(0,0,0);
    top: -5px;
    left: 0px;
    height: 29px;
    width: 0px;
    z-index: 0;
    opacity: 1;
    transform-origin:    100% 0%;
        -o-transform-origin:    100% 0%;
        -ms-transform-origin:    100% 0%;
        -webkit-transform-origin:    100% 0%;
        -moz-transform-origin:    100% 0%;
    animation: cssload-loader 11.5s ease-in-out infinite;
        -o-animation: cssload-loader 11.5s ease-in-out infinite;
        -ms-animation: cssload-loader 11.5s ease-in-out infinite;
        -webkit-animation: cssload-loader 11.5s ease-in-out infinite;
        -moz-animation: cssload-loader 11.5s ease-in-out infinite;
}






@keyframes cssload-loader{
        0%{width: 0px;}
        70%{width: 100%; opacity: 1;}
        90%{opacity: 0; width: 100%;}
        100%{opacity: 0;width: 0px;}
}

@-o-keyframes cssload-loader{
        0%{width: 0px;}
        70%{width: 100%; opacity: 1;}
        90%{opacity: 0; width: 100%;}
        100%{opacity: 0;width: 0px;}
}

@-ms-keyframes cssload-loader{
        0%{width: 0px;}
        70%{width: 100%; opacity: 1;}
        90%{opacity: 0; width: 100%;}
        100%{opacity: 0;width: 0px;}
}

@-webkit-keyframes cssload-loader{
        0%{width: 0px;}
        70%{width: 100%; opacity: 1;}
        90%{opacity: 0; width: 100%;}
        100%{opacity: 0;width: 0px;}
}

@-moz-keyframes cssload-loader{
        0%{width: 0px;}
        70%{width: 100%; opacity: 1;}
        90%{opacity: 0; width: 100%;}
        100%{opacity: 0;width: 0px;}
}

-----------------------------------------------------------------------------------------------------------------
Demo Show