refactor: use CircularProgressBar as loading animation

src/domains/splash/pages/Splash/Splash.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from "@arkecosystem/platform-sdk-intl";
 import { images } from "app/assets/images";
+import { CircularProgressBar } from "app/components/CircularProgressBar";
 import { Divider } from "app/components/Divider";
-import { Icon } from "app/components/Icon";
 import { Page, Section } from "app/components/Layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -20,15 +20,23 @@ export const Splash = ({ year }: any) => {
 		<Page navbarStyle="logo-only">
 			<Section className="flex flex-col justify-center flex-1 text-center">
 				<div className="w-64 mx-auto lg:w-128">
-					<SplashBanner />
+					<div className="ml-6">
+						<SplashBanner />
+					</div>
 				</div>
 
 				<div data-testid="Splash__text" className="mt-8">
 					<h1 className="text-4xl font-extrabold">{t("SPLASH.BRAND")}</h1>
 					<p className="text-theme-neutral-dark animate-pulse">{t("SPLASH.LOADING")}</p>
 					<div className="justify-center flex mt-4">
-						<div className="animate-spin text-theme-primary-400">
-							<Icon name="Notification" width={32} height={32} />
+						<div className="animate-spin">
+							<CircularProgressBar
+								showValue={false}
+								value={20}
+								strokeWidth={2}
+								size={40}
+								progressColor="var(--theme-color-primary)"
+							 />
 						</div>
 					</div>
 				</div>
@@ -45,7 +53,7 @@ export const Splash = ({ year }: any) => {
 					<img
 						src={commonAssets.ARKLogo}
 						className="h-4 w-4 bg-theme-neutral-500 rounded-sm p-px mr-2"
-						alt="ARK Logo"
+						alt={t("SPLASH.BRAND")}
 					/>
 					<div>{t("SPLASH.PRODUCT")}</div>
 					<Divider type="vertical" />