diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts
index 591b6fe..8dcaf0f 100644
--- a/src/app/components/calculate/calculate.component.ts
+++ b/src/app/components/calculate/calculate.component.ts
@@ -20,7 +20,7 @@ export class CalculateComponent implements OnInit {
private readonly MOBILE_DEVICE_CONTROL_HEIGHT = 674;
private readonly MOBILE_DEVICE_CONTROL_WIDTH = 599;
private readonly TIME_IN_MS_TO_REDRAW = 5e2;
- private readonly TIME_IN_MS_TO_EXPORT = 5e3;
+ private readonly TIME_IN_MS_TO_EXPORT = 1e4;
@HostListener('window:resize', ['$event'])
onResize(event: any) {
@@ -75,6 +75,10 @@ export class CalculateComponent implements OnInit {
captureScreen() {
this.isLoading = true;
+ this.animate('#bmc-wbtn', 'animate');
+ this.animate('#at4-share', 'animate');
+ this.animate('.at-expanding-share-button-toggle-bg', 'animate');
+
const calculatedListItemElements = document.querySelectorAll('mat-list-item article:last-child span') as NodeList;
const calculatedResultItemElements = document.querySelectorAll('.total-expense-amount') as NodeList;
const mortgageAmount = document.querySelector('.mortgage-amount') as HTMLInputElement;
@@ -90,6 +94,26 @@ export class CalculateComponent implements OnInit {
pdfExportUtils.exportAsPDF();
this.isLoading = false;
+
+ this.stopAnimate('#bmc-wbtn', 'animate');
+ this.stopAnimate('#at4-share', 'animate');
+ this.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
});
}
+
+ animate(querySelector: string, className: string) {
+ const affectedElement = document.querySelector(querySelector);
+
+ if (affectedElement) {
+ affectedElement.classList.add(className);
+ }
+ }
+
+ stopAnimate(querySelector: string, className: string) {
+ const affectedElement = document.querySelector(querySelector);
+
+ if (affectedElement) {
+ affectedElement.classList.remove(className);
+ }
+ }
}
diff --git a/src/app/components/loading/loading.component.html b/src/app/components/loading/loading.component.html
index cff9635..eea4f24 100644
--- a/src/app/components/loading/loading.component.html
+++ b/src/app/components/loading/loading.component.html
@@ -1,13 +1,8 @@
Your PDF report generation is in progress.
+ class="margin-bottom-md loading-text-area">While your PDF report generation is in progress,
please share and support us!
-
-Please don't forget to share and support
'Mortgage Expense Calculator'!
diff --git a/src/app/components/loading/loading.component.scss b/src/app/components/loading/loading.component.scss
index fa79b61..ddfd7fb 100644
--- a/src/app/components/loading/loading.component.scss
+++ b/src/app/components/loading/loading.component.scss
@@ -47,16 +47,4 @@
}
}
}
-
- @keyframes wave {
- 50%,
- 75% {
- transform: scale(2);
- }
-
- 80%,
- 100% {
- opacity: 0;
- }
- }
}
diff --git a/src/assets/scss/animations.scss b/src/assets/scss/animations.scss
new file mode 100644
index 0000000..c1e48fa
--- /dev/null
+++ b/src/assets/scss/animations.scss
@@ -0,0 +1,35 @@
+@keyframes wave {
+ 50%,
+ 75% {
+ transform: scale(2);
+ }
+
+ 80%,
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes tiny-wave {
+ 50%,
+ 75% {
+ transform: scale(1.5);
+ }
+
+ 80%,
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes bigger-wave {
+ 50%,
+ 75% {
+ transform: scale(3);
+ }
+
+ 80%,
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/src/assets/scss/custom-add-this-service-styles.scss b/src/assets/scss/custom-add-this-service-styles.scss
index c28e7ca..42b1e9e 100644
--- a/src/assets/scss/custom-add-this-service-styles.scss
+++ b/src/assets/scss/custom-add-this-service-styles.scss
@@ -1,49 +1,83 @@
body {
- .at-expanding-share-button .at-expanding-share-button-services-list > li {
- height: 40px !important;
- }
-
- .at-expanding-share-button .at-share-btn {
- height: 30px !important;
- }
-
- .at-expanding-share-button .at-icon-wrapper {
- height: 30px !important;
- line-height: 30px !important;
- width: 30px !important;
- }
-
- .at-expanding-share-button .at-icon {
- height: 25px !important;
- margin: 3px 0 !important;
- width: 25px !important;
- }
-
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle {
- height: 30px !important;
- }
-
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
- height: 30px !important;
- line-height: 30px !important;
- width: 30px !important;
- }
-
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
- height: 30px !important;
- line-height: 30px !important;
- width: 30px !important;
- }
-
- .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash {
- height: 30px !important;
- width: 30px !important;
- }
-
- .at-expanding-share-button .at-expanding-share-button-toggle-bg > span {
- background-size: 85% !important;
- background-color: #3f51b5 !important;
- }
+ .at-expanding-share-button .at-expanding-share-button-services-list > li {
+ height: 40px !important;
+ }
+
+ .at-expanding-share-button .at-share-btn {
+ height: 30px !important;
+ }
+
+ .at-expanding-share-button .at-icon-wrapper {
+ height: 30px !important;
+ line-height: 30px !important;
+ width: 30px !important;
+ }
+
+ .at-expanding-share-button .at-icon {
+ height: 25px !important;
+ margin: 3px 0 !important;
+ width: 25px !important;
+ }
+
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle {
+ height: 30px !important;
+ }
+
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
+ height: 30px !important;
+ line-height: 30px !important;
+ width: 30px !important;
+ }
+
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
+ height: 30px !important;
+ line-height: 30px !important;
+ width: 30px !important;
+ }
+
+ .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash {
+ height: 30px !important;
+ width: 30px !important;
+ }
+
+ .at-expanding-share-button .at-expanding-share-button-toggle-bg > span {
+ background-size: 85% !important;
+ background-color: #3f51b5 !important;
+ }
+
+ #at4-share {
+ &.animate {
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #fff !important;
+ animation-delay: 0.4s;
+ border-radius: 10px;
+ animation: tiny-wave 2s ease-out infinite;
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ body {
+ .at-expanding-share-button-toggle-bg {
+ &.animate {
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #fff !important;
+ animation-delay: 0.4s;
+ border-radius: 50%;
+ animation: bigger-wave 2s ease-out infinite;
+ }
+ }
+ }
+ }
}
diff --git a/src/assets/scss/custom-buymeacoffee-service-styles.scss b/src/assets/scss/custom-buymeacoffee-service-styles.scss
index 6254698..2ef637c 100644
--- a/src/assets/scss/custom-buymeacoffee-service-styles.scss
+++ b/src/assets/scss/custom-buymeacoffee-service-styles.scss
@@ -8,6 +8,19 @@ body {
height: 20px !important;
width: 20px !important;
}
+
+ &.animate {
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #fff !important;
+ animation-delay: 0.4s;
+ border-radius: inherit;
+ animation: bigger-wave 2s ease-out infinite;
+ }
+ }
}
}
diff --git a/src/styles.scss b/src/styles.scss
index 504b415..6b46cc2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
@import 'assets/scss/mixins.scss';
@import 'assets/scss/media-queries.scss';
+@import 'assets/scss/animations.scss';
@import 'assets/scss/custom-add-this-service-styles.scss';
@import 'assets/scss/custom-buymeacoffee-service-styles';