diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 524636c71af69f02acc59ff55a7b7435f0bed29b..fdfa011ecd660088b1461683498196f0b4db3cd8 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -119,6 +119,10 @@ c o n t e n t s
     }
 }
 
+.cw-loading-indicator-content {
+    margin-top: 76px;
+}
+
 /* * * * * * * * * * *
 c o n t e n t s  e n d
 * * * * * * * * * * */
diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0f78c4c2931c1892d3462cf650facf33ed2eb462
--- /dev/null
+++ b/resources/assets/stylesheets/scss/progress_indicator.scss
@@ -0,0 +1,29 @@
+.progress-indicator-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .progress-indicator {
+        width: 100%;
+        background-image: url("#{$image-path}/ajax-indicator-black.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .progress-indicator-description,
+    .progress-indicator-description-default {
+        color: $dark-gray-color-45;
+        text-align: center;
+        margin-top: 10px;
+    }
+    .progress-indicator-description-default {
+        display: none;
+    }
+    @media (prefers-reduced-motion) {
+        .progress-indicator {
+            @include background-icon(refresh, info, 32);
+        }
+        .progress-indicator-description-default {
+            display: block;
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 4a157b2456fd249052d2a6a7e3e950bd9c91dc1b..2f46b79b9a1732088f055db08ed3ba234689463d 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -19,6 +19,7 @@
 @import "scss/dates";
 @import "scss/files";
 @import "scss/fullscreen";
+@import "scss/progress_indicator.scss";
 @import "scss/my_courses";
 @import "scss/oer";
 @import "scss/report";
diff --git a/resources/vue/components/StudipProgressIndicator.vue b/resources/vue/components/StudipProgressIndicator.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8266ca2ae03deeb0bfdb97e39d1b8b74ef6a9515
--- /dev/null
+++ b/resources/vue/components/StudipProgressIndicator.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="progress-indicator-wrapper">
+        <div class="progress-indicator" :style="indicatorStyle"></div>
+        <p v-if="description !== ''" class="progress-indicator-description">
+            {{ description }}
+        </p>
+        <p v-else class="progress-indicator-description-default">
+            <translate>Lade...</translate>
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'studip-progress-indicator',
+    props: {
+        description: {
+            type: String,
+            required: false
+        },
+        width: {
+            type: Number,
+            default: 32
+        }
+    },
+    computed: {
+        indicatorStyle() {
+            let style = 'background-size: ' + this.width + 'px;';
+            style += 'height: ' + this.width + 'px;';
+
+            return style;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 76fbc4b7150206ebbdaabcf7f437ac17830513de..7209dedffad3736708c49dc338aff3e1373d77d0 100755
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -13,13 +13,18 @@
             <courseware-view-widget></courseware-view-widget>
         </MountingPortal>
     </div>
-    <div v-else><translate>Inhalte werden geladen</translate>...</div>
+    <studip-progress-indicator
+        v-else
+        class="cw-loading-indicator-content"
+        :description="$gettext('Lade Lernmaterial...')"
+    />
 </template>
 
 <script>
 import CoursewareStructuralElement from './CoursewareStructuralElement.vue';
 import CoursewareViewWidget from './CoursewareViewWidget.vue';
 import CoursewareActionWidget from './CoursewareActionWidget.vue';
+import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -27,6 +32,7 @@ export default {
         CoursewareStructuralElement,
         CoursewareViewWidget,
         CoursewareActionWidget,
+        StudipProgressIndicator,
     },
     data: () => ({
         canVisit: null,