<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="pin"></div> </div> </div>

.pin { width:60px; height:2px; background:#000; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-1px; opacity:0.5; z-index:-1; animation:watch-pin-move 22s 1s linear infinite; -webkit-animation:watch-pin-move 25s 1s linear infinite; -moz-animation:watch-pin-move 25s 1s linear infinite; } @keyframes watch-pin-move { 0% { transform-origin:0% 0; transform:rotateZ(0deg); } 100% { transform-origin:0% 0; transform:rotateZ(360deg); } } @-moz-keyframes watch-pin-move { 0% { transform-origin:0% 0; transform:rotateZ(0deg); } 100% { transform-origin:0% 0; transform:rotateZ(360deg); } } @-webkit-keyframes watch-pin-move { 0% { transform-origin:0% 0; transform:rotateZ(0deg); } 100% { transform-origin:0% 0; transform:rotateZ(360deg); } }