Waiting indikation

[peteraj]

Hi,

I am playing around with some code in the before_update hook, that takes some time (5-10 sec). Is there an easy way to make some sort of "progress indicator" or turn the cursor into an hour glass, while the code executes?

Thank you in advance

Kind regards
Peter

[onoehring]

Hi,

you could use CSS to change the cursor appearance - and change it back with some other CSS.
See: https://www.w3schools.com/csSref/pr_class_cursor.asp

Olaf

[D Oliveira]

Hi,

you could use CSS to change the cursor appearance - and change it back with some other CSS.
See: https://www.w3schools.com/csSref/pr_class_cursor.asp

Olaf

just adding to that you need a onchange or onclick event (javascript function) to trigger the .css change

[peteraj]

Thank you guys, does any of you have an example? I guess that I have to alter the tablename_view.php file?

[pbottcher]

Hi, you can try this:

put this in the header_extras.php

Code: Select all

<style>
.spinnerer {
	width: 244px;
	height: 100vh;
	line-height: 190vh;
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	font-family: helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	font-size:18px;
	color: rgb(206,66,51);
	letter-spacing: 0.2em;
}
.spinnerer::before, .spinnerer::after {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background: rgb(206,66,51);
	position: absolute;
	animation: spinner 0.81s infinite alternate ease-in-out;
		-o-animation: spinner 0.81s infinite alternate ease-in-out;
		-ms-animation: spinner 0.81s infinite alternate ease-in-out;
		-webkit-animation: spinner 0.81s infinite alternate ease-in-out;
		-moz-animation: spinner 0.81s infinite alternate ease-in-out;
}
.spinnerer::before {
	top: 0;
}
.spinnerer::after {
	bottom: 0;
}
@keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-o-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-ms-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-webkit-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-moz-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
</style>

and this in you TABLENAME-dv.js

Code: Select all

$j('.container').after('<div class="spinner" style="display: none" >Saving</div>');	

function show(id, value) {
	$j(id)[0].style.display = value ? 'block' : 'none';
}

$j(function () {
	$j('[name="myform"]').submit(function() {
		show('.container', false);
		show('.spinner', true);
	});
});

[onoehring]

Hi pbötcher,

very nice. Thank you for the code - once again.
Olaf

[pbottcher]

Small Correction, just saw that there is spinnerer instead of spinner in the CSS defintions. Use

Code: Select all

<style>
.spinner {
	width: 244px;
	height: 100vh;
	line-height: 190vh;
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	font-family: helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	font-size:18px;
	color: rgb(206,66,51);
	letter-spacing: 0.2em;
}
.spinner::before, .spinner::after {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background: rgb(206,66,51);
	position: absolute;
	animation: spinner 0.81s infinite alternate ease-in-out;
		-o-animation: spinner 0.81s infinite alternate ease-in-out;
		-ms-animation: spinner 0.81s infinite alternate ease-in-out;
		-webkit-animation: spinner 0.81s infinite alternate ease-in-out;
		-moz-animation: spinner 0.81s infinite alternate ease-in-out;
}
.spinner::before {
	top: 0;
}
.spinner::after {
	bottom: 0;
}
@keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-o-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-ms-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-webkit-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}
@-moz-keyframes spinner {
	0% {
		left: 0;
		height: 29px;
		width: 15px;
	}
	50% {
		height: 8px;
		width: 39px;
	}
	100% {
		left: 229px;
		height: 29px;
		width: 15px;
	}
}

</style>

[peteraj]

Works like a charm! Thanks pböttcher!