feat(spinners): add delay class to delay animation for 300ms

Author: brandonferrua

ui/components/spinners/base/_index.scss

@@ -121,6 +121,40 @@
   animation-delay: 750ms;
 }
 
+/**
+ * @summary Set a delay of 300ms on spinner
+ * @selector .slds-spinner_delayed
+ * @restrict .slds-spinner
+ * @modifier
+ * @group timing
+ */
+.slds-spinner_delayed {
+
+  &:before {
+    animation-delay: 216.66667ms;
+  }
+
+  .slds-spinner__dot-a:before {
+    animation-delay: 383.33333ms;
+  }
+
+  .slds-spinner__dot-b:before {
+    animation-delay: 550ms;
+  }
+
+  &:after {
+    animation-delay: 716.66667ms;
+  }
+
+  .slds-spinner__dot-a:after {
+    animation-delay: 883.33333ms;
+  }
+
+  .slds-spinner__dot-b:after {
+    animation-delay: 1050ms;
+  }
+}
+
 
 /**
  * This creates the blue brand spinner
@@ -149,8 +183,6 @@
  *
  * @selector .slds-spinner_inverse
  * @restrict .slds-spinner
- * @modifier
- * @group color
  */
 
 .slds-spinner_inverse,

ui/components/spinners/base/example.jsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 // Partial(s)
 /// ////////////////////////////////////////
 
-let Demo = props => (
+const Demo = props => (
   <div
     className={classNames('demo-only', props.className)}
     style={{ height: '6rem' }}
@@ -78,5 +78,30 @@ export let examples = [
         </SpinnerContainer>
       </Demo>
     )
+  },
+  {
+    id: 'inverse',
+    label: 'On inverse background',
+    element: (
+      <div
+        className="demo-only"
+        style={{ backgroundColor: '#16325c', height: '6rem' }}
+      >
+        <SpinnerContainer>
+          <Spinner className="slds-spinner_medium slds-spinner_inverse" />
+        </SpinnerContainer>
+      </div>
+    )
+  },
+  {
+    id: 'delayed',
+    label: 'With 300ms delay',
+    element: (
+      <Demo>
+        <SpinnerContainer>
+          <Spinner className="slds-spinner_medium slds-spinner_delayed" />
+        </SpinnerContainer>
+      </Demo>
+    )
   }
 ];