diff --git a/documentation/.vuepress/public/imgs/custom-loading-style.webp b/documentation/.vuepress/public/imgs/custom-loading-style.webp
new file mode 100644
index 000000000..ae2bba3ff
Binary files /dev/null and b/documentation/.vuepress/public/imgs/custom-loading-style.webp differ
diff --git a/documentation/html.md b/documentation/html.md
index 9df46852f..ef587e60a 100644
--- a/documentation/html.md
+++ b/documentation/html.md
@@ -83,6 +83,8 @@ For accessing components from regular javascript outside of the engine please re
 
 ## Customizing how loading looks
 
+See the *Loading Display* section in [needle engine component reference](./reference/needle-engine-attributes.md)
+
 ### Builtin styles
 
 The needle-engine loading appearance can use a light or dark skin.  
@@ -91,8 +93,7 @@ Options are `light` and `dark` (default):
 
 ``<needle-engine loading-style="light"></needle-engine>``
 
-### Custom Loading Style*  
-**Requires Pro License*  
+### Custom Loading Style — *PRO feature*  
 
 To change the loading appearance the following attributes can be used:
 
@@ -106,3 +107,5 @@ For example:
 ``<needle-engine loading-background-color="#444" loading-text-color="#000000" loading-logo-src="your_logo.png" primary-color="#00ff00" secondary-color="#ff0000"></needle-engine>``    
 
 During styling of the loading bar you can append `?debugloadingrendering` to your URL to keep the loading overlay visible.
+
+![custom loading](/imgs/custom-loading-style.webp)
\ No newline at end of file
diff --git a/documentation/reference/needle-engine-attributes.md b/documentation/reference/needle-engine-attributes.md
index b18b363b2..54e8e41ad 100644
--- a/documentation/reference/needle-engine-attributes.md
+++ b/documentation/reference/needle-engine-attributes.md
@@ -23,6 +23,13 @@ The table below shows a list of the most important ones:
 | `loadstart` | Name of the function to call when loading starts. Note that the arguments are `(ctx:Context, evt:Event)`. You can call `evt.preventDefault()` to hide the default loading overlay | 
 | `progress` | Name of the function to call when loading updates |
 | `loadfinished` | Name of the function to call when loading finishes | 
+| **Loading Display** | *Available options to change how the Needle Engine loading display looks. Use `?debugloadingrendering` for easier editing* |
+| `loading-style` | Options are `light` or `dark` |
+| `loading-background-color` | **PRO** — Change the loading background color (e.g. `=#dd5500`) |
+| `loading-text-color` | **PRO** — Change the loading text color |
+| `loading-logo-src` | **PRO** — Change the loading logo image |
+| `primary-color` | **PRO** — Change the primary loading color |
+| `secondary-color` | **PRO** — Change the secondary loading color |
 | **Internal** | |
 | `hash` | Used internally, is appended to the files being loaded to force an update (e.g. when the browser has cached a glb file). Should not be edited manually. |
 
@@ -60,4 +67,11 @@ Receiving an event when the needle-engine context has finished loading:
         console.log("Needle Engine has finished loading");
     }
 </script>
-```
\ No newline at end of file
+```
+
+### Custom Loading Style (PRO)
+
+You can easily modify how Needle Engine looks by setting the appropriate attributes on the `<needle-engine>` web component. Please see the table above for details.
+
+![custom loading](/imgs/custom-loading-style.webp)  
+[See code on github](https://github.com/needle-engine/vite-template/blob/loading-style/custom/index.html)
\ No newline at end of file