<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="loader">
<h1>Loading...</h1>
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
font-family: arial;
background-color: #262626;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loader h1 {
background-image: url(http://res.cloudinary.com/imranfakhrul/image/upload/v1524761072/ryba2.png);
margin: 0;
color: rgba(255, 255, 255, 0.2);
font-size: 70px;
padding: 61px;
animation: animate 1s linear infinite;
background-repeat-y: no-repeat;
background-repeat-x: repeat;
-webkit-background-clip: text;
}
@keyframes animate{
0%{
background-position: left 0 top -30px;
}
20%{
background-position: left 800px top -20px;
}
40%{
background-position: left 1800px top -10px;
}
60%{
background-position: left 24000px top 0px;
}
80%{
background-position: left 3400px top -10px;
}
100%{
background-position: left 4400px top -20px;
}
}
