resources/tools/dash/app/pal/static/sass/bootstrap/_spinners.scss

   1 //
   2 // Rotating border
   3 //
   4
   5 .spinner-grow,
   6 .spinner-border {
   7   display: inline-block;
   8   width: var(--#{$prefix}spinner-width);
   9   height: var(--#{$prefix}spinner-height);
  10   vertical-align: var(--#{$prefix}spinner-vertical-align);
  11   // stylelint-disable-next-line property-disallowed-list
  12   border-radius: 50%;
  13   animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
  14 }
  15
  16 // scss-docs-start spinner-border-keyframes
  17 @keyframes spinner-border {
  18   to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
  19 }
  20 // scss-docs-end spinner-border-keyframes
  21
  22 .spinner-border {
  23   // scss-docs-start spinner-border-css-vars
  24   --#{$prefix}spinner-width: #{$spinner-width};
  25   --#{$prefix}spinner-height: #{$spinner-height};
  26   --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  27   --#{$prefix}spinner-border-width: #{$spinner-border-width};
  28   --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  29   --#{$prefix}spinner-animation-name: spinner-border;
  30   // scss-docs-end spinner-border-css-vars
  31
  32   border: var(--#{$prefix}spinner-border-width) solid currentcolor;
  33   border-right-color: transparent;
  34 }
  35
  36 .spinner-border-sm {
  37   // scss-docs-start spinner-border-sm-css-vars
  38   --#{$prefix}spinner-width: #{$spinner-width-sm};
  39   --#{$prefix}spinner-height: #{$spinner-height-sm};
  40   --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
  41   // scss-docs-end spinner-border-sm-css-vars
  42 }
  43
  44 //
  45 // Growing circle
  46 //
  47
  48 // scss-docs-start spinner-grow-keyframes
  49 @keyframes spinner-grow {
  50   0% {
  51     transform: scale(0);
  52   }
  53   50% {
  54     opacity: 1;
  55     transform: none;
  56   }
  57 }
  58 // scss-docs-end spinner-grow-keyframes
  59
  60 .spinner-grow {
  61   // scss-docs-start spinner-grow-css-vars
  62   --#{$prefix}spinner-width: #{$spinner-width};
  63   --#{$prefix}spinner-height: #{$spinner-height};
  64   --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  65   --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  66   --#{$prefix}spinner-animation-name: spinner-grow;
  67   // scss-docs-end spinner-grow-css-vars
  68
  69   background-color: currentcolor;
  70   opacity: 0;
  71 }
  72
  73 .spinner-grow-sm {
  74   --#{$prefix}spinner-width: #{$spinner-width-sm};
  75   --#{$prefix}spinner-height: #{$spinner-height-sm};
  76 }
  77
  78 @if $enable-reduced-motion {
  79   @media (prefers-reduced-motion: reduce) {
  80     .spinner-border,
  81     .spinner-grow {
  82       --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
  83     }
  84   }
  85 }