"Glyphicon Spinner"
Bootstrap 3.2.0 Snippet by uzumaxy

<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); } }

Questions / Comments:

To create spinner you have to add one of the following classes to selector with glyphicon:

- ".fast-right-spinner" - rotates by clockwise with high speed;

- ".normal-right-spinner" - rotates by clockwise with normal speed;

- ".slow-right-spinner" - rotates by clockwise with slow speed;

- ".fast-left-spinner" - rotates by anticlockwise with high speed;

- ".normal-left-spinner" - rotates by anticlockwise with normal speed;

- ".slow-left-spinner" - rotates by anticlockwise with slow speed.

Maxim Grischuk (0) - 3 years ago - Reply 0


Related: See More