diff --git a/src/pages/components/inline-loading/images/inline-loading-alignment.png b/src/pages/components/inline-loading/images/inline-loading-alignment.png
new file mode 100644
index 00000000000..210644151be
Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-alignment.png differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-anatomy.png b/src/pages/components/inline-loading/images/inline-loading-anatomy.png
new file mode 100644
index 00000000000..96ef72ee31b
Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-anatomy.png differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-animated.gif b/src/pages/components/inline-loading/images/inline-loading-animated.gif
deleted file mode 100644
index 0f21926d1c4..00000000000
Binary files a/src/pages/components/inline-loading/images/inline-loading-animated.gif and /dev/null differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-interactions.png b/src/pages/components/inline-loading/images/inline-loading-interactions.png
new file mode 100644
index 00000000000..dbc3f2ff4ff
Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-interactions.png differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-modifier.png b/src/pages/components/inline-loading/images/inline-loading-modifier.png
new file mode 100644
index 00000000000..6f5e1aa666d
Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-modifier.png differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-states.png b/src/pages/components/inline-loading/images/inline-loading-states.png
new file mode 100644
index 00000000000..861edf90c5d
Binary files /dev/null and b/src/pages/components/inline-loading/images/inline-loading-states.png differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-usage-1.png b/src/pages/components/inline-loading/images/inline-loading-usage-1.png
deleted file mode 100644
index d78a80e9ae4..00000000000
Binary files a/src/pages/components/inline-loading/images/inline-loading-usage-1.png and /dev/null differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-usage-2.png b/src/pages/components/inline-loading/images/inline-loading-usage-2.png
deleted file mode 100644
index b79647b66a2..00000000000
Binary files a/src/pages/components/inline-loading/images/inline-loading-usage-2.png and /dev/null differ
diff --git a/src/pages/components/inline-loading/images/inline-loading-usage-3.png b/src/pages/components/inline-loading/images/inline-loading-usage-3.png
deleted file mode 100644
index eabe0b232af..00000000000
Binary files a/src/pages/components/inline-loading/images/inline-loading-usage-3.png and /dev/null differ
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index 577342de27b..22968aa3afc 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -8,8 +8,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
-The inline loading component provides visual feedback that a user's action is
-being processed.
+The inline loading component provides visual feedback that data is being processed.
@@ -18,7 +17,9 @@ being processed.
Overview
Live demo
Formatting
-States
+Content
+Behaviors
+Related
Feedback
@@ -30,9 +31,17 @@ user that their request is being processed. Although they do not provide details
about what is occurring on the back-end, they reassure the user that their
action is being processed.
-Use an inline loading component for any Create, Update, or Delete actions. It
-can be used in a table, after a primary or secondary button click, or even in a
-modal.
+Common actions that benefit from inline loading include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+
+### When to use
+
+- Use an inline loading component for any action that cannot be performed instantly and will only require a short time to process.
+- Use when retrieving or refreshing small data amounts, such as status.
+
+### When not to use
+
+- Don't use inline loading for full page loads, use skeleton states instead.
+- Don't trigger inline loading on more than one item or action at a time, unless on initial page load or refresh.
## Live demo
@@ -63,61 +72,113 @@ modal.
## Formatting
-- If the inline loading is being used to submit a form, the form fields should
- get disabled.
+### Anatomy
+
+
+
+
+
+
+
+
+
+1. **Loading status**: indicates the state of the loading sequence (active, inactive, finished, error).
+2. **Label**: assistive text that explains the loading status.
+
+### Placement
+
+When inline loading temporarily replaces content, it should appear in the same spot as the content it replaced and maintain the same alignment.
+
+
+
+
+
+
+
+
+
+## Content
+
+### Main elements
+
+Descriptive loading text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations.
+
+#### Active loading label
-- Descriptive text for the action is optional, but encouraged. If you have
- limited room or find adding text to be unnecessary you can just run through
- the animations.
+This is the text that appears while the action is happening. The label should tell the user what action is being performed. For example, if it appears while a form is being save then it should say "Saving ...".
-- The _success_ state of the inline loading component is active for 1.5 seconds
- before calling a optional function onSuccess. Use the onSuccess function to
- refetch new data, close a modal, or reset a form. If no function is specified
- the success state will last indefinitely.
+#### Finished loading label
-- If an error occurs, the Inline loading component should be hidden and a error
- notification should be added or error handling within a form should appear.
+Once the action has finished, the label should change to tell the user that the action was completed successfully. For example, when saving a form it would read "Saved" upon completion.
-- The inline loading component should never be used to load a page or data.
+#### Error loading label
-## States
+If the action fails then the label should change to tell the user that an error or failure has occurred.
-#### Loading
+### Further guidance
-The _loading_ state indicates that the action is still in progress.
+For further content guidance, see Carbon's [content guidelines](<[https://www.carbondesignsystem.com/guidelines/content/general](https://www.carbondesignsystem.com/guidelines/content/general)>).
+
+## Behaviors
+
+### States
+
+There are four states to inline loading: inactive, active, success, and error.
-
+
+#### Inactive
+
+The inactive loading state is when no data is being loaded. Inactive has no visual indicator.
+
+#### Active
+
+The active loading state indicates that the action is still in progress.
+
#### Success
-The _success_ state indicates that the action completed successfully.
+The success loading state indicates that the action completed successfully. The success state is active for 1.5 seconds before calling an optional function `onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely.
+
+#### Error
+
+The error loading state indicates that the action did not successfully complete. If an error occurs, the inline loading component becomes inactive and an inline notification or error handling within the form should appear.
+
+### Interactions
+
+Any interactive elements associated with the item that is loading should be disabled until the loading is complete. For example, in a file uploader the item that is loading is disabled until fully uploaded. If the inline loading is being used to submit a form, the form fields should be disabled until the loading is complete.
-
+
-#### Error
+### Modifiers
-The _error_ state indicates that the action did not complete successfully.
+A loading spinner can be used by itself without a label. It is most commonly used this way inside a field input.
-
+
+## Related
+
+- [Loading](/components/loading/usage)
+- [Skeleton states](https://www.carbondesignsystem.com/patterns/loading-pattern#skeleton-states)
+- [Loading pattern](/patterns/loading-pattern)
+
## Feedback
Help us improve this component by providing feedback, asking questions, and