Bootstrap Snippets, Pre Loader Animation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pre Loader Animation - Bootstrap Pre Loader</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<style type="text/css">
.pre-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.loader-animation {
    width: 200px;
    height: 200px;
    margin-top: 20%;
    margin-left: 40%;
    position: relative;
}
.loaderAnimation1,
.loaderAnimation2,
.loaderAnimation3 {
    position: absolute;
    border-radius: 100%;
    border: 10px solid transparent;
}
.loaderAnimation1 {
    width: 150px;
    height: 150px;
    border-top: 10px solid #0099da;
    border-bottom: 10px solid #0099da;
    top: 15px;
    left: 15px;
    animation: leftToRight 2s linear infinite;
}
.loaderAnimation2 {
    width: 130px;
    height: 130px;
    border: 10px solid #FF5706;
    top: 25px;
    left: 25px;
}
.loaderAnimation3 {
    width: 110px;
    height: 110px;
    border-right: 10px solid #0099da;
    border-left: 10px solid #0099da;
    top: 35px;
    left: 35px;
    animation: topToBottom 2s linear infinite;
}
@keyframes leftToRight {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes topToBottom {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}
</style>
<body>

<div class="pre-loader">
    <div class="loader-animation">
        <div class="loaderAnimation1"></div>
        <div class="loaderAnimation2"></div>
        <div class="loaderAnimation3"></div>
    </div>
</div>