Merge pull request #1084 from Codeinwp/changes-speed-and-position-for-the-loading-bar

Changes speed and position for the loading bar

Author: vytisbulkevicius

js/setup-wizard.js

@@ -53,13 +53,13 @@ jQuery(function ($) {
 		// Import chart data.
 		if ( 1 == id ) {
 			var chartType = $(".vz-radio-btn:checked").val();
-			var percentBarWidth = 100;
+			var percentBarWidth = 0;
 			var loaderDelay;
 			$.ajax( {
 				beforeSend: function() {
 					loaderDelay = setInterval(function () {
 						$('.vz-progress-bar').css({
-							width: percentBarWidth-- + '%'
+							width: percentBarWidth++ + '%'
 						});
 					}, 1000);
 				},
@@ -76,9 +76,9 @@ jQuery(function ($) {
 					clearInterval( loaderDelay );
 					loaderDelay = setInterval(function () {
 						$('.vz-progress-bar').css({
-							width: percentBarWidth-- + '%'
+							width: percentBarWidth++ + '%'
 						});
-						if ( percentBarWidth <= 0 ) {
+						if ( percentBarWidth >= 100 ) {
 							if ( 1 === data.success ) {
 								var importMessage = jQuery('[data-import_message]');
 								importMessage
@@ -95,11 +95,14 @@ jQuery(function ($) {
 								$('#smartwizard').smartWizard('reset');
 							}
 							$('.vz-progress-bar').css({
-								width: 0
+								width: 100 + '%'
+							});
+							$('.vz-progress').css({
+								visibility: 'hidden'
 							});
 							clearInterval( loaderDelay );
 						}
-					}, 100 );
+					}, 36 );
 				},
 				error: function() {
 					$('#step-2').find('.vz-progress-bar').animate({ width: '0' });

templates/setup-wizard.php

@@ -178,23 +178,23 @@ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'v
 									<h2 class="h2 pb-8"><?php esc_html_e( 'You\'re almost done!', 'visualizer' ); ?></h2>
 									<p class="p"><?php esc_html_e( 'We use demo data during the import process, don&#x92;t worry you can customize it later', 'visualizer' ); ?></p>
 								</div>
-								<div class="vz-progress">
-									<div class="vz-progress-bar" style="width: 100%;"></div>
-								</div>
 							</div>
 							<div class="vz-accordion-item__content">
 								<div class="vz-form-wrap">
-									<div class="form-block">
+									<div class="form-block" style="padding-top: 8px">
 										<div class="vz-error-notice notice notice-error hidden"></div>
 										<div class="pb-30">
 											<div class="vz-shortcode-preview-box">
 												<div class="vz-shortcode-preview-title border-0">
 													<div class="icon">
 														<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/database-icon.png' ); ?>" alt="">
 													</div>
-													<div class="txt">
+													<div class="txt" style="width: 100%;">
 														<h4 class="h4 pb-4"><?php esc_html_e( 'Importing demo data', 'visualizer' ); ?></h4>
-														<p class="p" data-import_message="<?php esc_attr_e( 'Done! Demo data imported successfully', 'visualizer' ); ?>"><?php esc_html_e( 'Hold on! we are importing demo data for your selected chart', 'visualizer' ); ?></p>
+														<p class="p" data-import_message="<?php esc_attr_e( 'Done! Demo data imported successfully.', 'visualizer' ); ?>"><?php esc_html_e( 'Hold on! we are importing demo data for your selected chart', 'visualizer' ); ?></p>
+													<div class="vz-progress" style="margin-top: 4px;">
+														<div class="vz-progress-bar"></div>
+													</div>
 													</div>
 												</div>
 											</div>