// // Rotating border // @keyframes spinner-border { to { transform: rotate(360deg); } } .spinner-border { position: relative; display: inline-block; width: $spinner-width; height: $spinner-height; overflow: hidden; text-indent: -999em; vertical-align: text-bottom; border: $spinner-border-width solid; border-color: currentColor transparent currentColor currentColor; border-radius: 50%; animation: spinner-border .75s linear infinite; } .spinner-border-sm { width: $spinner-width-sm; height: $spinner-height-sm; border-width: $spinner-border-width-sm; } // // Growing circle // @keyframes spinner-grow { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } .spinner-grow { position: relative; display: inline-block; width: $spinner-width; height: $spinner-height; overflow: hidden; text-indent: -999em; vertical-align: text-bottom; background-color: currentColor; border-radius: 50%; animation: spinner-grow .75s linear infinite; } .spinner-grow-sm { width: $spinner-width-sm; height: $spinner-height-sm; }