From 2895adad91ded8622bd0fca1401a6cbafe1472fe Mon Sep 17 00:00:00 2001 From: oguzhan Date: Tue, 14 Dec 2021 02:48:09 +0300 Subject: [PATCH] Added async example --- examples/async.html | 110 +++++++++++++++++++++++++++++++++++++++++ examples/css/style.css | 43 ++++++++++++++++ src/Steps.js | 12 ++--- 3 files changed, 159 insertions(+), 6 deletions(-) create mode 100755 examples/async.html diff --git a/examples/async.html b/examples/async.html new file mode 100755 index 0000000..208de43 --- /dev/null +++ b/examples/async.html @@ -0,0 +1,110 @@ + + + + + + + Async + + + + + + +
+ +
+
+ ... step1 +
+
+ ... step2 +
+
+ ... step3 +
+
+
+ + + +
+
+
Loading...
+ + + + + + diff --git a/examples/css/style.css b/examples/css/style.css index 3741373..52ca660 100755 --- a/examples/css/style.css +++ b/examples/css/style.css @@ -17,3 +17,46 @@ label.error { input.error { border: 2px solid #e7505a; } + +.loader, +.loader:after { + border-radius: 50%; + width: 10em; + height: 10em; +} +.loader { + display: none; + margin-top: 10px; + overflow: hidden; + font-size: 3px; + text-indent: -9999em; + border-top: 1.1em solid rgba(255, 255, 255, 0.2); + border-right: 1.1em solid rgba(255, 255, 255, 0.2); + border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); + border-left: 1.1em solid #31c5d2; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; +} +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/src/Steps.js b/src/Steps.js index cc0f305..c370e0b 100755 --- a/src/Steps.js +++ b/src/Steps.js @@ -46,12 +46,12 @@ class Steps { // set default step this.setActiveStep(0, this.options.startAt, true); - this.setFooterBtns(); + this.setFooterButtons(); // show footer buttons if (!this.options.showFooterButtons) { - this.hideFooterBtns(); - this.setFooterBtns = $.noop; + this.hideFooterButtons(); + this.setFooterButtons = $.noop; } } @@ -122,11 +122,11 @@ class Steps { } i = conditionIncrementOrDecrement(i); } - this.setFooterBtns(); + this.setFooterButtons(); } } - setFooterBtns() { + setFooterButtons() { const stepIndex = this.getStepIndex(); const maxIndex = this.getMaxStepIndex(); const $footer = this.el.find(this.options.footerSelector); @@ -193,7 +193,7 @@ class Steps { this.hook('onFinish'); } - hideFooterBtns() { + hideFooterButtons() { this.el.find(this.options.footerSelector).hide(); }