add animations

src/app/styles/animation.scss

@@ -0,0 +1,70 @@
+@use './variable.scss' as v;
+
+.loading-animation {
+	display: block;
+	text-align: center;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+
+	.global-spinner {
+		display: block;
+		width: 24px;
+		height: 24px;
+		margin: 0 auto;
+		position: relative;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			border: 4px solid #e5e7eb;
+			border-top: 4px solid #667eea;
+			border-radius: 50%;
+			animation: spin 1s linear infinite;
+		}
+
+		&.large {
+			width: 80px;
+			height: 80px;
+
+			&::before {
+				border: 10px solid #e5e7eb;
+				border-top: 10px solid #667eea;
+			}
+		}
+
+	}
+}
+
+.loading-placeholder {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+/* 	min-width: 80px;
+	min-height: 80px; */
+
+	&.start {
+		justify-content: start;
+	}
+
+	.loading-animation {
+		display: block;
+		text-align: center;
+		position: relative;
+		left: auto;
+		top: auto;
+		transform: none;
+	}
+
+	.global-spinner {
+		display: inline-block;
+		width: 24px;
+		height: 24px;
+		position: relative;
+	}
+}

src/app/styles/global-styles.scss

@@ -6,6 +6,7 @@
 @use './reports.scss';
 @use './privacy-and-terms-pages.scss';
 @use './VKLogin.scss';
+@use './animation.scss';
 
 .page-title {
 	font-size: 30px;

src/app/styles/pages-styles.scss

@@ -4075,46 +4075,6 @@
 	}
 }
 
-.loading-animation {
-	display: block;
-	text-align: center;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-
-	.global-spinner {
-		display: block;
-		width: 24px;
-		height: 24px;
-		margin: 0 auto;
-		position: relative;
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			border: 4px solid #e5e7eb;
-			border-top: 4px solid #667eea;
-			border-radius: 50%;
-			animation: spin 1s linear infinite;
-		}
-
-		&.large {
-			width: 80px;
-			height: 80px;
-
-			&::before {
-				border: 10px solid #e5e7eb;
-				border-top: 10px solid #667eea;
-			}
-		}
-
-	}
-}
 
 .modal-window-confirm-payment {
 	background: white;