diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx
index f7d454fa48a1f..43666567cff12 100644
--- a/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx
+++ b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx
@@ -1,15 +1,143 @@
-import ScanAnim1 from './scan-animation-1.svg';
-import ScanAnim2 from './scan-animation-2.svg';
-import ScanAnim3 from './scan-animation-3.svg';
import styles from './styles.module.scss';
const InProgressAnimation: React.FC = () => {
return (
-
+
);
};
diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg
deleted file mode 100644
index c06565daec2a3..0000000000000
--- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg
deleted file mode 100644
index 7c9140c130256..0000000000000
--- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg
deleted file mode 100644
index 4ef0ba1021605..0000000000000
--- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx
new file mode 100644
index 0000000000000..a7bcb81161c39
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx
@@ -0,0 +1,10 @@
+import InProgressAnimation from '..';
+
+export default {
+ title: 'Plugins/Protect/In Progress Animation',
+ component: InProgressAnimation,
+};
+
+const Template = args => ;
+export const Default = Template.bind( {} );
+Default.args = {};
diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss
index cb3e1fcb77277..bba29ab024eb3 100644
--- a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss
@@ -1,44 +1,26 @@
-.scan__animation {
+.inProgressAnimation {
position: relative;
-
- @media ( max-width: 1240px ) {
- display: none;
- }
}
-.scan__animation_el_1,
-.scan__animation_el_2,
-.scan__animation_el_3 {
+.inProgressAnimation__el {
+ position: relative;
+ animation: inprogress 4s ease-in-out 0.8s infinite normal forwards;
+ transform: translateY( 24px );
opacity: 0;
- position: absolute;
- z-index: 4;
- animation: animation-el-3 4s ease-in-out 0.8s infinite normal forwards;
}
-.scan__animation_el_1 {
- bottom: 24px;
- right: 230px;
- animation-name: animation_el_1;
+.inProgressAnimation__el:nth-of-type(2) {
animation-delay: 0.6s;
}
-.scan__animation_el_2 {
- bottom: -19px;
- right: 10px;
- animation-name: animation_el_2;
+.inProgressAnimation__el:nth-of-type(3) {
animation-delay: 0.7s;
}
-.scan__animation_el_3 {
- bottom: -164px;
- right: -40px;
- animation-name: animation_el_3;
-}
-
-@keyframes animation_el_1 {
+@keyframes inprogress {
0% {
opacity: 0;
- transform: translateY( 32px );
+ transform: translateY( 24px );
}
20% {
opacity: 1;
@@ -50,56 +32,16 @@
}
60% {
opacity: 0;
- transform: translateY( -96px );
+ transform: translateY( -48px );
}
100% {
opacity: 0;
- transform: translateY( -96px );
+ transform: translateY( -48px );
}
}
-@keyframes animation_el_2 {
- 0% {
- opacity: 0;
- transform: translateY( 64px );
- }
- 20% {
- opacity: 1;
- transform: translateY( 0 );
- }
- 50% {
- opacity: 1;
- transform: translateY( 0 );
- }
- 60% {
- opacity: 0;
- transform: translateY( -96px );
- }
- 100% {
- opacity: 0;
- transform: translateY( -96px );
+@media (prefers-reduced-motion: reduce) {
+ .inProgressAnimation__el {
+ animation: none;
}
}
-
-@keyframes animation_el_3 {
- 0% {
- opacity: 0;
- transform: translateY( 44px );
- }
- 20% {
- opacity: 1;
- transform: translateY( 0 );
- }
- 50% {
- opacity: 1;
- transform: translateY( 0 );
- }
- 60% {
- opacity: 0;
- transform: translateY( -84px );
- }
- 100% {
- opacity: 0;
- transform: translateY( -84px );
- }
-}
\ No newline at end of file