• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Coach indicator

Component status
Contribution
Last releasedFebruary 26, 2024
Current version@spectrum-css/coachindicator@1.1.4

Variants


Standard
Contribution

Show markup
<div class="spectrum-CoachIndicator">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--light">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-CoachIndicator spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--light spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

Migration Guide


  • Coach Indicator is now a seperate component from Coach Mark