Primary
Loading
<div style="position: relative; height: 200px;"> <div class="ecl-spinner ecl-spinner--primary ecl-spinner--m ecl-spinner--centered ecl-spinner--visible" role="alert"> <svg class="ecl-spinner__loader" viewBox="25 25 50 50"> <circle class="ecl-spinner__circle" cx="50" cy="50" r="20" fill="none" stroke-width="4px" stroke-miterlimit="10" vector-effect="non-scaling-stroke" /> </svg> <div class="ecl-spinner__text">Loading</div> </div> </div>
Try it yourself on the playground
PlaygroundInverted
Loading
<div class="ecl-u-bg-dark" style="position: relative; height: 200px"> <div class="ecl-spinner ecl-spinner--inverted ecl-spinner--m ecl-spinner--centered ecl-spinner--visible" role="alert"> <svg class="ecl-spinner__loader" viewBox="25 25 50 50"> <circle class="ecl-spinner__circle" cx="50" cy="50" r="20" fill="none" stroke-width="4px" stroke-miterlimit="10" vector-effect="non-scaling-stroke" /> </svg> <div class="ecl-spinner__text">Loading</div> </div> </div>
Try it yourself on the playground
Playground