diff --git a/SolarPower/Views/AnalysisInverter/Index.cshtml b/SolarPower/Views/AnalysisInverter/Index.cshtml
index 1189e5b..adeba19 100644
--- a/SolarPower/Views/AnalysisInverter/Index.cshtml
+++ b/SolarPower/Views/AnalysisInverter/Index.cshtml
@@ -4,16 +4,8 @@
     ViewData["Title"] = "逆變器交叉分析";
 }
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/AnalysisStationCombine/Index.cshtml b/SolarPower/Views/AnalysisStationCombine/Index.cshtml
index 0f9afd7..ad6772d 100644
--- a/SolarPower/Views/AnalysisStationCombine/Index.cshtml
+++ b/SolarPower/Views/AnalysisStationCombine/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/AnalysisStationInfo/Index.cshtml b/SolarPower/Views/AnalysisStationInfo/Index.cshtml
index e2016c5..fe998f6 100644
--- a/SolarPower/Views/AnalysisStationInfo/Index.cshtml
+++ b/SolarPower/Views/AnalysisStationInfo/Index.cshtml
@@ -4,16 +4,8 @@
     ViewData["Title"] = "電站交叉分析";
 }
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/Company/Index.cshtml b/SolarPower/Views/Company/Index.cshtml
index 57bd79b..389277a 100644
--- a/SolarPower/Views/Company/Index.cshtml
+++ b/SolarPower/Views/Company/Index.cshtml
@@ -19,16 +19,8 @@
 </div>
 <!-- Your main content goes below here: -->
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/ElectricitySoldRecord/Index.cshtml b/SolarPower/Views/ElectricitySoldRecord/Index.cshtml
index 84516eb..bc29fec 100644
--- a/SolarPower/Views/ElectricitySoldRecord/Index.cshtml
+++ b/SolarPower/Views/ElectricitySoldRecord/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/ExceptionRecord/Index.cshtml b/SolarPower/Views/ExceptionRecord/Index.cshtml
index 13de8ab..6056b16 100644
--- a/SolarPower/Views/ExceptionRecord/Index.cshtml
+++ b/SolarPower/Views/ExceptionRecord/Index.cshtml
@@ -12,16 +12,8 @@
     <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
 </ol>
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/Login/Index.cshtml b/SolarPower/Views/Login/Index.cshtml
index 2ea9727..b25dc1a 100644
--- a/SolarPower/Views/Login/Index.cshtml
+++ b/SolarPower/Views/Login/Index.cshtml
@@ -25,20 +25,8 @@
     <!-- icheck bootstrap -->
     <link href="~/lib/icheck-bootstrap/icheck-bootstrap.min.css" rel="stylesheet" />
     <!-- Theme style -->
-
-    <link rel="stylesheet" href="~/css/loading.css" />
 </head>
 <body>
-    <div class="loadEffect" id="loading" style="top: 50%;">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-    </div>
 
     <div class="blankpage-form-field">
         <div class="page-logo m-0 w-100 align-items-center justify-content-center rounded border-bottom-left-radius-0 border-bottom-right-radius-0 px-4">
@@ -52,31 +40,31 @@
             {
                 <p class="alert alert-danger">@ViewBag.ErrMsg</p>
             }
-        <form id="login-form" asp-action="Index" method="post">
-            <div class="form-group">
-                <label class="form-label" for="username">帳號</label>
-                <input asp-for="Account" type="text" id="account" class="form-control" placeholder="Account">
-                <span asp-validation-for="Account" class="text-danger"></span>
-                <span class="help-block">
-                    您的帳號
-                </span>
-            </div>
-            <div class="form-group">
-                <label class="form-label" for="password">密碼</label>
-                <input asp-for="Password" type="password" id="password" class="form-control" placeholder="Password" autocomplete="off">
-                <span asp-validation-for="Password" class="text-danger"></span>
-                <span class="help-block">
-                    您的密碼
-                </span>
-            </div>
-            <div class="form-group text-left">
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" id="rememberme">
-                    <label class="custom-control-label" for="rememberme"> 記住我</label>
+            <form id="login-form" asp-action="Index" method="post">
+                <div class="form-group">
+                    <label class="form-label" for="username">帳號</label>
+                    <input asp-for="Account" type="text" id="account" class="form-control" placeholder="Account">
+                    <span asp-validation-for="Account" class="text-danger"></span>
+                    <span class="help-block">
+                        您的帳號
+                    </span>
                 </div>
-            </div>
-            <button type="submit" class="btn btn-default float-right" id="login">登入</button>
-        </form>
+                <div class="form-group">
+                    <label class="form-label" for="password">密碼</label>
+                    <input asp-for="Password" type="password" id="password" class="form-control" placeholder="Password" autocomplete="off">
+                    <span asp-validation-for="Password" class="text-danger"></span>
+                    <span class="help-block">
+                        您的密碼
+                    </span>
+                </div>
+                <div class="form-group text-left">
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="rememberme">
+                        <label class="custom-control-label" for="rememberme"> 記住我</label>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-default float-right" id="login">登入</button>
+            </form>
         </div>
         <div class="blankpage-footer text-center">
             <a asp-controller="Login" asp-action="ForgotPassword"><strong>忘記密碼</strong></a>
@@ -87,6 +75,10 @@
         <source src="~/media/video/cc.webm" type="video/webm">
         <source src="~/media/video/cc.mp4" type="video/mp4">
     </video>
+
+    <div class="d-flex justify-content-center text-secondary" style="transform: translateY(1150%);">
+        <div class="spinner-border" role="status" id="loading" style="display: none"></div>
+    </div>
     @*
 
         <div class="login-box">
diff --git a/SolarPower/Views/MapOverview/Index.cshtml b/SolarPower/Views/MapOverview/Index.cshtml
index d12f7a8..874e48c 100644
--- a/SolarPower/Views/MapOverview/Index.cshtml
+++ b/SolarPower/Views/MapOverview/Index.cshtml
@@ -11,16 +11,8 @@
 
 <!-- Your main content goes below here: -->
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative; ">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 @*<div class="row mb-5">*@
diff --git a/SolarPower/Views/NoticeSchedule/Index.cshtml b/SolarPower/Views/NoticeSchedule/Index.cshtml
index 9b9833d..c6c3510 100644
--- a/SolarPower/Views/NoticeSchedule/Index.cshtml
+++ b/SolarPower/Views/NoticeSchedule/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/Operation/Index.cshtml b/SolarPower/Views/Operation/Index.cshtml
index f69d213..a5d142f 100644
--- a/SolarPower/Views/Operation/Index.cshtml
+++ b/SolarPower/Views/Operation/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <ol class="breadcrumb page-breadcrumb">
diff --git a/SolarPower/Views/Operation/OperationRecord.cshtml b/SolarPower/Views/Operation/OperationRecord.cshtml
index 4b3d692..34d7cbf 100644
--- a/SolarPower/Views/Operation/OperationRecord.cshtml
+++ b/SolarPower/Views/Operation/OperationRecord.cshtml
@@ -17,16 +17,8 @@
     </h1>
 </div>
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <!-- Your main content goes below here: -->
diff --git a/SolarPower/Views/PowerGeneration/Index.cshtml b/SolarPower/Views/PowerGeneration/Index.cshtml
index 15a4c19..dd4d840 100644
--- a/SolarPower/Views/PowerGeneration/Index.cshtml
+++ b/SolarPower/Views/PowerGeneration/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="container-fluid">
diff --git a/SolarPower/Views/PowerStation/Index.cshtml b/SolarPower/Views/PowerStation/Index.cshtml
index 32bb4dc..9a9f3b1 100644
--- a/SolarPower/Views/PowerStation/Index.cshtml
+++ b/SolarPower/Views/PowerStation/Index.cshtml
@@ -6,16 +6,8 @@
 @using SolarPower.Models.Role
 @model RoleLayerEnum
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <ol class="breadcrumb page-breadcrumb">
diff --git a/SolarPower/Views/PowerStation/PowerStationEdit.cshtml b/SolarPower/Views/PowerStation/PowerStationEdit.cshtml
index 5bf358e..af41d56 100644
--- a/SolarPower/Views/PowerStation/PowerStationEdit.cshtml
+++ b/SolarPower/Views/PowerStation/PowerStationEdit.cshtml
@@ -16,16 +16,8 @@
 
 <!-- Your main content goes below here: -->
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/SensorType/Index.cshtml b/SolarPower/Views/SensorType/Index.cshtml
index 45043b0..227fd97 100644
--- a/SolarPower/Views/SensorType/Index.cshtml
+++ b/SolarPower/Views/SensorType/Index.cshtml
@@ -19,16 +19,8 @@
 </div>
 <!-- Your main content goes below here: -->
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/StationOverview/Index.cshtml b/SolarPower/Views/StationOverview/Index.cshtml
index 7940593..ed54d4b 100644
--- a/SolarPower/Views/StationOverview/Index.cshtml
+++ b/SolarPower/Views/StationOverview/Index.cshtml
@@ -12,16 +12,8 @@
 
 <!-- Your main content goes below here: -->
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml b/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml
index c5d14f5..d9c58cf 100644
--- a/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml
+++ b/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml
@@ -13,16 +13,8 @@
         <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
     </ol>*@
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/Views/User/Index.cshtml b/SolarPower/Views/User/Index.cshtml
index f6edadd..d9a09ab 100644
--- a/SolarPower/Views/User/Index.cshtml
+++ b/SolarPower/Views/User/Index.cshtml
@@ -11,16 +11,8 @@
     <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
 </ol>
 
-<link rel="stylesheet" href="~/css/loading.css" />
-<div class="loadEffect" id="loading" style="top: 10%;">
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
-    <span></span>
+<div class="d-flex justify-content-center text-secondary" style="top: 10%; transform: translateY(50%); z-index: 100; position: relative;">
+    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; display:none;" id="loading"></div>
 </div>
 
 <div class="row">
diff --git a/SolarPower/wwwroot/css/loading.css b/SolarPower/wwwroot/css/loading.css
deleted file mode 100644
index 5ed1acd..0000000
--- a/SolarPower/wwwroot/css/loading.css
+++ /dev/null
@@ -1,86 +0,0 @@
-.loadEffect {
-    z-index: 9999;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    width: 100px;
-    height: 100px;
-    position: absolute;
-    margin: 0 auto;
-    margin-top: 100px;
-    display: none;
-}
-
-.loadEffect span {
-    display: inline-block;
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
-    background: black;
-    position: absolute;
-    -webkit-animation: load 1.04s ease infinite;
-}
-
-@-webkit-keyframes load {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.2;
-    }
-}
-
-.loadEffect span:nth-child(1) {
-    left: 0;
-    top: 50%;
-    margin-top: -8px;
-    -webkit-animation-delay: 0.13s;
-}
-
-.loadEffect span:nth-child(2) {
-    left: 14px;
-    top: 14px;
-    -webkit-animation-delay: 0.26s;
-}
-
-.loadEffect span:nth-child(3) {
-    left: 50%;
-    top: 0;
-    margin-left: -8px;
-    -webkit-animation-delay: 0.39s;
-}
-
-.loadEffect span:nth-child(4) {
-    top: 14px;
-    right: 14px;
-    -webkit-animation-delay: 0.52s;
-}
-
-.loadEffect span:nth-child(5) {
-    right: 0;
-    top: 50%;
-    margin-top: -8px;
-    -webkit-animation-delay: 0.65s;
-}
-
-.loadEffect span:nth-child(6) {
-    right: 14px;
-    bottom: 14px;
-    -webkit-animation-delay: 0.78s;
-}
-
-.loadEffect span:nth-child(7) {
-    bottom: 0;
-    left: 50%;
-    margin-left: -8px;
-    -webkit-animation-delay: 0.91s;
-}
-
-.loadEffect span:nth-child(8) {
-    bottom: 14px;
-    left: 14px;
-    -webkit-animation-delay: 1.04s;
-}
-
-
-