<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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='col-lg-12 text-center'> <p> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat fast-right-spinner"></span> fast-right-spinner </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat normal-right-spinner"></span> normal-right-spinner </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat slow-right-spinner"></span> slow-right-spinner </button> </p> <p> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat fast-left-spinner"></span> fast-left-spinner </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat normal-left-spinner"></span> normal-left-spinner </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-repeat slow-left-spinner"></span> slow-left-spinner </button> </p> </div> </div> </div>

body, html { padding-top: 1em; } .glyphicon.fast-right-spinner { -webkit-animation: glyphicon-spin-r 1s infinite linear; animation: glyphicon-spin-r 1s infinite linear; } .glyphicon.normal-right-spinner { -webkit-animation: glyphicon-spin-r 2s infinite linear; animation: glyphicon-spin-r 2s infinite linear; } .glyphicon.slow-right-spinner { -webkit-animation: glyphicon-spin-r 3s infinite linear; animation: glyphicon-spin-r 3s infinite linear; } .glyphicon.fast-left-spinner { -webkit-animation: glyphicon-spin-l 1s infinite linear; animation: glyphicon-spin-l 1s infinite linear; } .glyphicon.normal-left-spinner { -webkit-animation: glyphicon-spin-l 2s infinite linear; animation: glyphicon-spin-l 2s infinite linear; } .glyphicon.slow-left-spinner { -webkit-animation: glyphicon-spin-l 3s infinite linear; animation: glyphicon-spin-l 3s infinite linear; } @-webkit-keyframes glyphicon-spin-r { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes glyphicon-spin-r { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes glyphicon-spin-l { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes glyphicon-spin-l { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }