@keyframes fade-in {
  from {
    opacity: .5; }
  to {
    opacity: 1; } }

.bi-spinner, .bi-spinner--sm, .bi-spinner--xs {
  animation: rotate .5s linear infinite; }

@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-360deg); } }

@keyframes fade-in2 {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.bi-spinner, .bi-spinner--sm, .bi-spinner--xs {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px; }
  .bi-spinner:after, .bi-spinner--sm:after, .bi-spinner--xs:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #2196F3;
    border-right-color: transparent;
    border-radius: 100px; }

.bi-spinner--sm {
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important; }
  .bi-spinner--sm:after {
    border-width: 2px !important; }

.bi-spinner--xs {
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important; }
  .bi-spinner--xs:after {
    border-width: 2px !important; }