Update loading button examples to work with new spinner updates

docs/pages/components/button.md

@@ -561,10 +561,10 @@ const App = () => (
 Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
 
 ```html:preview
-<sl-button variant="default" loading>Default</sl-button>
-<sl-button variant="primary" loading>Primary</sl-button>
-<sl-button variant="warning" loading>Warning</sl-button>
-<sl-button variant="danger" loading>Danger</sl-button>
+<sl-button variant="default" size="small" loading>Default</sl-button>
+<sl-button variant="primary" size="medium" loading>Primary</sl-button>
+<sl-button variant="warning" size="large" loading>Warning</sl-button>
+<sl-button variant="danger" size="x-large" loading>Danger</sl-button>
 ```
 
 ```pug:slim

src/components/button/button.styles.ts

@@ -505,7 +505,8 @@ export default css`
   }
 
   .button--loading sl-spinner {
-    --indicator-color: currentColor;
+    --track-width: 2px;
+    --speed: 3s;
     position: absolute;
     font-size: 1em;
     height: 1em;