diff --git a/docs/examples/Disabled.md b/docs/examples/Disabled.md
index 12bd13144e206a0239d3cb054509fc7566123c0f..e8c94d895cbc1775e1462121e2c6170e6bb82a6c 100644
--- a/docs/examples/Disabled.md
+++ b/docs/examples/Disabled.md
@@ -4,6 +4,9 @@ This uses the same data as the tic-tac-toe but is completely disabled.
 Notice how the items still move if the tic-tac-toe data would
 change. Uncheck the checkbox to enable:
 
+The grid can also be in a loading state, in which it is disabled as well,
+but it displays loading symbols everywhere. Check the checkbox to try:
+
 <ClientOnly>
 <script setup>
 import Example6Disabled from "../../example/src/Example6Disabled.vue";
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 05bd43b1a155bfc901a59aafe9ea9f266b2e05f0..9419ebff1f7bef94de8f5f730fffcb290024d738 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -133,6 +133,12 @@ To customize the highlight, use the `highlight` slot inside the grid component.
 
 To disable the highlight, use the `no-highlight` prop.
 
+## Displaying the loading of items
+
+If the grid is supplied with the `loading` prop, it will be in a loading status. In this status it is
+disabled, like if `disabled` where true, but the grid is filled with elements inside the `loader` slot.
+This provides the ability to do something like more realistic skeleton loaders.
+
 ## Changing items on move
 
 It is possible to make changes to an item once it moved successfully. One can supply a function in the
diff --git a/example/src/App.vue b/example/src/App.vue
index e0f7b1e0c2755c2ce6b4f6a12cb920c260ddc8d2..ed093f14b5ee732a8b1829600355e0b01ba25bbf 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -68,8 +68,8 @@ import Example8Responsive from "./Example8Responsive.vue";
         <h2>Example 6: Disabled grid</h2>
         <p>
           This uses the same data as the tic tac toe but is completely disabled.
-          Notice how the items still move if the tic tac toe grid above is
-          changed. Uncheck the checkbox to enable:
+          Notice how the items still move if the data were changed. The grid can
+          also be loading. Uncheck the checkbox to enable:
         </p>
 
         <example6-disabled></example6-disabled>
diff --git a/example/src/Example6Disabled.vue b/example/src/Example6Disabled.vue
index d2267dbdfb3047bc927cc0d6ce2804dc3ce0c725..38bd6cd7e33036ff294dec72465e44b04b8249ce 100644
--- a/example/src/Example6Disabled.vue
+++ b/example/src/Example6Disabled.vue
@@ -1,6 +1,7 @@
 <script setup>
 import CircularCard from "./components/CircularCard.vue";
 import DragGrid from "../../src/DragGrid.vue";
+import SpinningLoader from "./components/SpinningLoader.vue";
 </script>
 
 <template>
@@ -9,12 +10,17 @@ import DragGrid from "../../src/DragGrid.vue";
       <input type="checkbox" v-model="gridDisabled" />
       Grid disabled?
     </label>
+    <label>
+      <input type="checkbox" v-model="gridLoading" />
+      Grid is loading?
+    </label>
 
     <drag-grid
       v-model="ticTacToe"
       :cols="3"
       :rows="3"
       :disabled="gridDisabled"
+      :loading="gridLoading"
       class="tic-tac-toe"
       context="ticTacToe"
     >
@@ -23,6 +29,11 @@ import DragGrid from "../../src/DragGrid.vue";
           {{ item.key.startsWith("a") ? "X" : "O" }}
         </CircularCard>
       </template>
+      <template #loader>
+        <CircularCard>
+          <SpinningLoader></SpinningLoader>
+        </CircularCard>
+      </template>
     </drag-grid>
   </div>
 </template>
@@ -37,6 +48,7 @@ export default {
         { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
       ],
       gridDisabled: true,
+      gridLoading: false,
     };
   },
 };
diff --git a/example/src/components/SpinningLoader.vue b/example/src/components/SpinningLoader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47a434900f39e0491a485f045c666700246effc5
--- /dev/null
+++ b/example/src/components/SpinningLoader.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="lds-spinner">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SpinningLoader",
+};
+</script>
+
+<style scoped>
+.lds-spinner {
+  color: inherit;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-spinner div {
+  transform-origin: 40px 40px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+.lds-spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 18px;
+  border-radius: 20%;
+  background: #fff;
+}
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>