diff --git a/src/components/app/app.ts b/src/components/app/app.ts
index a141a3a..8fe2a17 100644
--- a/src/components/app/app.ts
+++ b/src/components/app/app.ts
@@ -8,6 +8,7 @@ import pWaitFor from 'p-wait-for';
 import {HttpUtils} from '@/utils/http-utils';
 import {CourseUtils} from '@/utils/course-utils';
 import {GPAUtils} from '@/utils/gpa-utils';
+import Loading from '@/components/loading/loading';
 
 /**
  * Objects of this interface represent assignment grades.
@@ -57,7 +58,7 @@ export interface Course
 }
 
 @Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading},
 })
 export default class App extends Vue
 {
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
new file mode 100644
index 0000000..38d0655
--- /dev/null
+++ b/src/components/loading/loading.ts
@@ -0,0 +1,10 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+
+@Component({
+    components: {}
+})
+export default class Loading extends Vue
+{
+    // @ts-ignore
+    @Prop() text: string;
+}
diff --git a/src/components/loading/loading.vue b/src/components/loading/loading.vue
new file mode 100644
index 0000000..cba6eda
--- /dev/null
+++ b/src/components/loading/loading.vue
@@ -0,0 +1,34 @@
+<template>
+    <div id="loading">
+        <div id="text">
+            {{text}}
+        </div>
+    </div>
+</template>
+
+<script src="./loading.ts" lang="ts"></script>
+
+<style scoped>
+    #loading
+    {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #00000065;
+
+        text-align: center;
+    }
+
+    #text
+    {
+        color: white;
+
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>