mixin SpinnerBasicExampleDemo
  .spinner-border(role='status')
    span.visually-hidden Loading...
    
mixin SpinnerColorsDemo
  each val in colors
    .spinner-border(class=`text-${val}` role='status')
      = '\n'
      span.visually-hidden Loading...
      = '\n'



mixin SpinnerGrowingDemo
  .spinner-grow(role='status')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
    
    
mixin SpinnerGrowingColorDemo
  each val in colors
    .spinner-grow(class=`text-${val}` role='status')
      = '\n'
      span.visually-hidden Loading...
      = '\n'
  
mixin SpinnerSizeDemo
  .spinner-border.spinner-border-sm(role='status')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
  .spinner-border(role='status')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
  .spinner-grow.spinner-grow-sm(role='status')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
  .spinner-grow(role='status')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
    
mixin SpinnerButtonDemo
  button.btn.btn-primary.me-1(type='button', disabled='')
    = '\n'
    span.spinner-border.spinner-border-sm(role='status', aria-hidden='true')
    = '\n'
    span.visually-hidden Loading...
    = '\n'
  button.btn.btn-primary(type='button', disabled='')
    = '\n'
    span.spinner-border.spinner-border-sm(role='status', aria-hidden='true')
    = '\n'
    |   Loading...
    = '\n'