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); + } +}