codekingpro/portable-devtools

1//2// Rotating border3//4 5@keyframes spinner-border {6  to { transform: rotate(360deg); }7}8 9.spinner-border {10  display: inline-block;11  width: $spinner-width;12  height: $spinner-height;13  vertical-align: $spinner-vertical-align;14  border: $spinner-border-width solid currentcolor;15  border-right-color: transparent;16  // stylelint-disable-next-line property-disallowed-list17  border-radius: 50%;18  animation: .75s linear infinite spinner-border;19}20 21.spinner-border-sm {22  width: $spinner-width-sm;23  height: $spinner-height-sm;24  border-width: $spinner-border-width-sm;25}26 27//28// Growing circle29//30 31@keyframes spinner-grow {32  0% {33    transform: scale(0);34  }35  50% {36    opacity: 1;37    transform: none;38  }39}40 41.spinner-grow {42  display: inline-block;43  width: $spinner-width;44  height: $spinner-height;45  vertical-align: $spinner-vertical-align;46  background-color: currentcolor;47  // stylelint-disable-next-line property-disallowed-list48  border-radius: 50%;49  opacity: 0;50  animation: .75s linear infinite spinner-grow;51}52 53.spinner-grow-sm {54  width: $spinner-width-sm;55  height: $spinner-height-sm;56}57 58@if $enable-prefers-reduced-motion-media-query {59  @media (prefers-reduced-motion: reduce) {60    .spinner-border,61    .spinner-grow {62      animation-duration: 1.5s;63    }64  }65}66