Skip to content

Latest commit

 

History

History
34 lines (26 loc) · 905 Bytes

migrate-to-10.x.md

File metadata and controls

34 lines (26 loc) · 905 Bytes

HTML

Design change around the spinner UI involves markup change for the loading SVG's circle, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in carbondesignsystem.com site. React and other framework variants should reflect the change automatically.

New Markup:

<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
  <circle class="bx--loading__background" cx="0" cy="0" r="30" />
  <circle class="bx--loading__stroke" cx="0" cy="0" r="30" />
</svg>

Old Markup:

<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
  <circle cx="0" cy="0" r="37.5" />
</svg>

SCSS

v9 v10 Note
- bx--loading__background ✨New
- bx--loading__stroke ✨New