"preloader"
Bootstrap 4.0.0 Snippet by Shakibur22

Post to Facebook Tweet this

<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 ----------> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div class="pre"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve" width="30" height="30"> <rect fill="#FBBA44" width="15" height="15"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;15,0;15,15;0,15;0,0;" repeatCount="indefinite"/> </rect> <rect x="15" fill="#E84150" width="15" height="15"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,15;-15,15;-15,0;0,0;" repeatCount="indefinite"/> </rect> <rect x="15" y="15" fill="#62B87B" width="15" height="15"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;-15,0;-15,-15;0,-15;0,0;" repeatCount="indefinite"/> </rect> <rect y="15" fill="#2F6FB6" width="15" height="15"> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,-15;15,-15;15,0;0,0;" repeatCount="indefinite"/> </rect> </svg> </div> </body> </html>
body { background: #111d27; } .pre { position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; }

Related: See More

Paper Kit 2

Questions / Comments: