diff --git a/atable/src/components/ATableLoading.vue b/atable/src/components/ATableLoading.vue
new file mode 100644
index 00000000..d9bd32f8
--- /dev/null
+++ b/atable/src/components/ATableLoading.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="aloading">
+		<h2 class="aloading-header">
+			<slot></slot>
+		</h2>
+		<div class="aloading-bar"></div>
+	</div>
+</template>
+
+<style scoped>
+.aloading {
+	width: 100%;
+	border-top: 1px solid var(--sc-row-border-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
+	display: flex;
+	background-color: white;
+	border-left: 4px solid var(--sc-row-border-color);
+	padding-left: 0.5ch !important;
+	padding-right: 0.5ch;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	align-items: center;
+	box-sizing: border-box;
+	background: var(--sc-focus-cell-background);
+	overflow: hidden;
+	position: relative;
+}
+.aloading-bar {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: -100%;
+	top: 0;
+	background: linear-gradient(
+		90deg,
+		rgba(var(--sc-table-loading-color), 0) 0%,
+		rgba(var(--sc-table-loading-color), 1) 50%,
+		rgba(var(--sc-table-loading-color), 0) 100%
+	);
+	animation: gradient infinite 2s;
+	z-index: 0;
+}
+.aloading-header {
+	color: var(--sc-cell-text-color);
+	font-family: var(--sc-atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--sc-table-font-size);
+	padding: 0;
+	margin: 0;
+	font-weight: normal;
+	z-index: 1;
+}
+.aloading-header::after {
+	content: '...';
+	animation: ellipse 2s;
+	animation-iteration-count: infinite;
+}
+
+@keyframes gradient {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
+@keyframes ellipse {
+	0% {
+		content: '';
+	}
+	20% {
+		content: '';
+	}
+	40% {
+		content: '.';
+	}
+	60% {
+		content: '..';
+	}
+	80% {
+		content: '...';
+	}
+}
+</style>
diff --git a/atable/src/components/ATableLoadingBar.vue b/atable/src/components/ATableLoadingBar.vue
new file mode 100644
index 00000000..88ce0b31
--- /dev/null
+++ b/atable/src/components/ATableLoadingBar.vue
@@ -0,0 +1,81 @@
+<template>
+	<div class="aloading">
+		<h2 class="aloading-header">
+			<slot></slot>
+		</h2>
+		<div class="aloading-bar"></div>
+	</div>
+</template>
+
+<style scoped>
+.aloading {
+	width: 100%;
+	border-top: 1px solid var(--sc-row-border-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
+	display: flex;
+	background-color: white;
+	border-left: 4px solid var(--sc-row-border-color);
+	padding-left: 0.5ch !important;
+	padding-right: 0.5ch;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	align-items: center;
+	box-sizing: border-box;
+	background: var(--sc-focus-cell-background);
+	overflow: hidden;
+	position: relative;
+}
+.aloading-bar {
+	width: 50%;
+	height: 3px;
+	position: absolute;
+	left: -100%;
+	bottom: 0;
+	background: var(--sc-row-border-color);
+	animation: bar-left infinite 2s;
+	z-index: 0;
+}
+.aloading-header {
+	color: var(--sc-cell-text-color);
+	font-family: var(--sc-atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--sc-table-font-size);
+	padding: 0;
+	margin: 0;
+	font-weight: normal;
+	z-index: 1;
+}
+.aloading-header::after {
+	content: '...';
+	animation: ellipse 2s;
+	animation-iteration-count: infinite;
+}
+
+@keyframes bar-left {
+	0% {
+		left: -50%;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
+@keyframes ellipse {
+	0% {
+		content: '';
+	}
+	20% {
+		content: '';
+	}
+	40% {
+		content: '.';
+	}
+	60% {
+		content: '..';
+	}
+	80% {
+		content: '...';
+	}
+}
+</style>
diff --git a/atable/src/index.ts b/atable/src/index.ts
index eb92709f..b8ad3810 100644
--- a/atable/src/index.ts
+++ b/atable/src/index.ts
@@ -5,6 +5,8 @@ import AExpansionRow from './components/AExpansionRow.vue'
 import ARow from './components/ARow.vue'
 import ATable from './components/ATable.vue'
 import ATableHeader from './components/ATableHeader.vue'
+import ATableLoading from './components/ATableLoading.vue'
+import ATableLoadingBar from './components/ATableLoadingBar.vue'
 import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
 export type {
@@ -28,7 +30,9 @@ function install(app: App /* options */) {
 	app.component('ARow', ARow)
 	app.component('ATable', ATable)
 	app.component('ATableHeader', ATableHeader)
+	app.component('ATableLoading', ATableLoading)
+	app.component('ATableLoadingBar', ATableLoadingBar)
 	app.component('ATableModal', ATableModal)
 }
 
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal }
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableModal }
diff --git a/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json b/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json
new file mode 100644
index 00000000..050ac312
--- /dev/null
+++ b/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "added atable loading component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
\ No newline at end of file
diff --git a/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json b/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json
new file mode 100644
index 00000000..2ca286eb
--- /dev/null
+++ b/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "added rgb variable for loading gradient color",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}
\ No newline at end of file
diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md
index c45b61cd..9bd2d7c4 100644
--- a/common/reviews/api/atable.api.md
+++ b/common/reviews/api/atable.api.md
@@ -10,6 +10,7 @@ import { App } from 'vue';
 import ARow from './components/ARow.vue';
 import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
+import ATableLoading from './components/ATableLoading.vue';
 import ATableModal from './components/ATableModal.vue';
 import { ComputedRef } from 'vue';
 import { CSSProperties } from 'vue';
@@ -26,6 +27,8 @@ export { ATable }
 
 export { ATableHeader }
 
+export { ATableLoading }
+
 export { ATableModal }
 
 // @public
diff --git a/examples/atable/default.story.vue b/examples/atable/default.story.vue
index 533aa47c..61ce86f7 100644
--- a/examples/atable/default.story.vue
+++ b/examples/atable/default.story.vue
@@ -12,6 +12,11 @@
 		<Variant title="full width">
 			<ATable v-model="full_width_table.rows" :columns="full_width_table.columns" :config="full_width_table.config" />
 		</Variant>
+		<Variant title="loading options">
+			<ATableLoading>Loading</ATableLoading>
+			<br />
+			<ATableLoadingBar>Loading</ATableLoadingBar>
+		</Variant>
 	</Story>
 </template>
 
@@ -21,6 +26,19 @@ import { reactive } from 'vue'
 
 import rows from './sample_data/http_logs.json'
 
+const empty_rows = [
+	{
+		home_page: {
+			title: 'https://ceara.berlin',
+			url: 'https://ceara.berlin',
+		},
+		http_method: 'HEAD',
+		ip_address: '75.228.138.84',
+		report_date: 1580804064118.311,
+		status: '503 Service Unavailable',
+	},
+]
+
 const columns: TableColumn[] = [
 	{
 		label: 'Home Page',
diff --git a/themes/default/_variables.css b/themes/default/_variables.css
index 53c0581a..a1c17d23 100644
--- a/themes/default/_variables.css
+++ b/themes/default/_variables.css
@@ -55,6 +55,7 @@
 	--sc-atable-row-padding: 0.125rem;
 	--sc-atable-row-height: 1.5em;
 	--sc-atable-cell-border-width: 2px;
+	--sc-table-loading-color: 204, 204, 204;
 
 	/* BTNS */
 	--sc-btn-border: #cccccc;