"INDIA LOADER....."
Bootstrap 4.1.1 Snippet by vaidehi1234

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="loader.css"> </head> <body> <h1> <span style="background-color:#ff8000">I</span> <span style="background-color:#ff8000">N</span> <span>D</span> <span style="background-color:#008000">I</span> <span style="background-color:#008000">A</span> </h1> </body> </html>
body { margin:0; padding:0; background:#d4cbcb; } h1 { margin:0; padding:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color: #0000ff; } h1 span { color:#0000ff; background:#fff; padding:15px 25px; font-family:arial; display: table-cell; box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ff8000; animation: animate 0.5s infinite; } @keyframes animate { 0% { transform: translateY(0px); box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ff8000, 0 15px 5px rgba(0,0,0,0); } 50% { transform: translateY(-20px); box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ffffff, 0 15px 5px rgba(0,0,0,0.6); } 100% { transform: translateY(0px); box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #008000, 0 15px 5px rgba(0,0,0,0); } } h1 span:nth-child(1) { animation-delay: 0.2s; } h1 span:nth-child(2) { animation-delay: 0.4s; } h1 span:nth-child(3) { animation-delay: 0.6s; } h1 span:nth-child(4) { animation-delay: 0.8s; } h1 span:nth-child(5) { animation-delay: 1s; }

Related: See More


Questions / Comments: