diff --git a/web/apps/payments/src/components/EnteSpinner.tsx b/web/apps/payments/src/components/EnteSpinner.tsx
index 277857e0e..d65c73614 100644
--- a/web/apps/payments/src/components/EnteSpinner.tsx
+++ b/web/apps/payments/src/components/EnteSpinner.tsx
@@ -1,10 +1,5 @@
import * as React from "react";
-import { Spinner } from "react-bootstrap";
-export const EnteSpinner: React.FC = () => {
- return (
-
- Loading...
-
- );
+export const Spinner: React.FC = () => {
+ return
;
};
diff --git a/web/apps/payments/src/pages/index.tsx b/web/apps/payments/src/pages/index.tsx
index 69288efa7..93535f9c5 100644
--- a/web/apps/payments/src/pages/index.tsx
+++ b/web/apps/payments/src/pages/index.tsx
@@ -1,5 +1,5 @@
import { Container } from "components/Container";
-import { EnteSpinner } from "components/EnteSpinner";
+import { Spinner } from "components/EnteSpinner";
import * as React from "react";
import { parseAndHandleRequest } from "services/billingService";
import { CUSTOM_ERROR } from "utils/error";
@@ -35,7 +35,7 @@ export default function Home() {
{errorMessageView ? (
{constants.SOMETHING_WENT_WRONG}
) : (
- loading &&
+ loading &&
)}
);
diff --git a/web/apps/payments/src/styles/globals.css b/web/apps/payments/src/styles/globals.css
index d0d1ccf23..e75d7598d 100644
--- a/web/apps/payments/src/styles/globals.css
+++ b/web/apps/payments/src/styles/globals.css
@@ -20,3 +20,19 @@ body {
display: flex;
flex-direction: column;
}
+
+.loading-spinner {
+ color: #28a745;
+ width: 2rem;
+ height: 2rem;
+ border: 0.25em solid currentColor;
+ border-right-color: transparent;
+ border-radius: 50%;
+ animation: 0.75s linear infinite spinner-border;
+}
+
+@keyframes spinner-border {
+ 100% {
+ transform: rotate(360deg);
+ }
+}