diff --git a/src/components/login/login.ts b/src/components/login/login.ts
index 06fc654..114fa0a 100644
--- a/src/components/login/login.ts
+++ b/src/components/login/login.ts
@@ -12,6 +12,8 @@ export default class Login extends Vue
     public username: any = '';
     public password: any = '';
 
+    public loading: boolean = false;
+
     /**
      * On click, sends username and password to the server.
      */
@@ -20,6 +22,9 @@ export default class Login extends Vue
         // Call custom event
         this.$emit('login:click', this.username, this.password);
 
+        // Make login button loading
+        this.loading = true;
+
         // Fetch request TODO: Add username and password when the https server is ready.
         fetch(`${Constants.API_URL}/veracross/courses`).then(res =>
         {
diff --git a/src/components/login/login.vue b/src/components/login/login.vue
index 82e9bf0..fbc940e 100644
--- a/src/components/login/login.vue
+++ b/src/components/login/login.vue
@@ -5,7 +5,7 @@
             <h1>Veracross Analyzer</h1>
             <el-input v-model="username" placeholder="School Username"></el-input>
             <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
-            <el-button plain type="primary" @click="onLoginClick">Login</el-button>
+            <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
         </div>
     </div>
 </template>