diff --git a/.changeset/old-ears-heal.md b/.changeset/old-ears-heal.md
new file mode 100644
index 0000000000..758a514739
--- /dev/null
+++ b/.changeset/old-ears-heal.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Click to Pay - Replacing loading gif by animated SVGs
diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
index 0e3ced8909..478b99f213 100644
--- a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
+++ b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
@@ -1,14 +1,173 @@
-.adyen-checkout-ctp__loading {
- &-image {
- display: block;
- margin: 30px auto auto;
+@keyframes card-bounce {
+ 0% {
+ -webkit-translate: 0 -60%;
+ -moz-translate: 0 -60%;
+ -ms-translate: 0 -60%;
+ translate: 0 -60%;
+ animation-timing-function: cubic-bezier(0.17, 0.17, 0.32, 1);
}
- &-subtitle {
- font-size: 16px;
- line-height: 19px;
- max-width: 280px;
- text-align: center;
- margin: 0 auto 58px;
+ 9.70874% {
+ -webkit-translate: 0 8.5%;
+ -moz-translate: 0 8.5%;
+ -ms-translate: 0 8.5%;
+ translate: 0 8.5%;
+ animation-timing-function: cubic-bezier(0.41, 0, 0.49, 1);
}
+
+ 23.4466% {
+ -webkit-translate: 0 -22.5%;
+ -moz-translate: 0 -22.5%;
+ -ms-translate: 0 -22.5%;
+ translate: 0 -22.5%;
+ animation-timing-function: cubic-bezier(0.29, 0, 0.26, 1);
+ }
+
+ 47.7184% {
+ -webkit-translate: 0;
+ -moz-translate: 0;
+ -ms-translate: 0;
+ translate: 0;
+ }
+
+ 63.8835% {
+ -webkit-translate: 0;
+ -moz-translate: 0;
+ -ms-translate: 0;
+ translate: 0;
+ animation-timing-function: cubic-bezier(1, 0, 0.78, 1);
+ }
+
+ 86.5534% {
+ -webkit-translate: 0 40.7%;
+ -moz-translate: 0 40.7%;
+ -ms-translate: 0 40.7%;
+ translate: 0 40.7%;
+ }
+
+ 100% {
+ -webkit-translate: 0 40.7%;
+ -moz-translate: 0 40.7%;
+ -ms-translate: 0 40.7%;
+ translate: 0 40.7%;
+ }
+}
+
+@keyframes card-fade-100 {
+ 0% {
+ opacity: 0;
+ animation-timing-function: linear;
+ }
+
+ 8.1068% {
+ opacity: 1;
+ }
+
+ 78.4466% {
+ opacity: 1;
+ }
+
+ 86.5534% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes card-fade-60 {
+ 0% {
+ opacity: 0;
+ animation-timing-function: linear;
+ }
+
+ 8.1068% {
+ opacity: 0.6;
+ }
+
+ 78.4466% {
+ opacity: 0.6;
+ }
+
+ 86.5534% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes card-fade-20 {
+ 0% {
+ opacity: 0;
+ animation-timing-function: linear;
+ }
+
+ 8.1068% {
+ opacity: 0.2;
+ }
+
+ 78.4466% {
+ opacity: 0.2;
+ }
+
+ 86.5534% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+.adyen-checkout-ctp__card-animation {
+ position: relative;
+ max-width: 100%;
+ aspect-ratio: 1/0.4380;
+ filter: grayscale(1);
+ width: 140px;
+ margin: 40px auto 50px;
+}
+
+.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-size: contain!important;
+}
+
+.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(1) {
+ z-index: 3;
+ opacity: 1;
+ background: url('data:image/svg+xml,') left top no-repeat,url('data:image/svg+xml,') left top no-repeat;
+ animation: card-bounce 2060ms linear infinite both, card-fade-100 2060ms linear infinite both;
+ animation-delay: 100ms;
+}
+
+.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(2) {
+ z-index: 2;
+ opacity: 0.6;
+ transform: translateY(25%);
+ background: url('data:image/svg+xml,') left top no-repeat;
+ animation: card-bounce 2060ms linear infinite both, card-fade-60 2060ms linear infinite both;
+ animation-delay: 50ms;
+}
+
+.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(3) {
+ z-index: 1;
+ opacity: 0.2;
+ transform: translateY(50%);
+ background: url('data:image/svg+xml,') left top no-repeat;
+ animation: card-bounce 2060ms linear infinite both, card-fade-20 2060ms linear infinite both;
+}
+
+.adyen-checkout-ctp__loading-subtitle {
+ font-size: 16px;
+ line-height: 19px;
+ max-width: 280px;
+ text-align: center;
+ margin: 0 auto 58px;
}
diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx
index 0177b82c13..719073158a 100644
--- a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx
+++ b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.tsx
@@ -1,21 +1,18 @@
import { Fragment, h } from 'preact';
import useCoreContext from '../../../../../core/Context/useCoreContext';
-import useImage from '../../../../../core/Context/useImage';
-import Img from '../../../Img';
import './CtPLoader.scss';
const CtPLoader = (): h.JSX.Element => {
const { i18n } = useCoreContext();
- const getImage = useImage();
return (
- 
+
+
{i18n.get('ctp.loading.intro')}
);