<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 ----------> <div class="_loader4"></div>

body { background: #000; } /*Loader*/ ._loader, ._loader:before, ._loader:after { background: #FFF; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } ._loader:before, ._loader:after { position: absolute; top: 0; content: ""; } ._loader:before { left: -1.5em; } ._loader { text-indent: -9999em; margin: 8em auto; position: relative; font-size: 12px; -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } ._loader:after { left: 1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } ._loader4:before, ._loader4:after, ._loader4 { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load4 1.8s infinite ease-in-out; animation: load4 1.8s infinite ease-in-out; } ._loader4 { margin: 8em auto; font-size: 12px; position: relative; text-indent: -9999em; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } ._loader4:before { left: -3.5em; } ._loader4:after { left: 3.5em; -webkit-animation-delay: 0.32s; animation-delay: 0.32s; } ._loader4:before, ._loader4:after { content: ""; position: absolute; top: 0; } @-webkit-keyframes load4 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #ffffff; } 40% { box-shadow: 0 2.5em 0 0 #FFF; } } @keyframes load4 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #ffffff; } 40% { box-shadow: 0 2.5em 0 0 #FFF; } }