Waiting indikation

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
peteraj
Posts: 27
Joined: 2016-02-05 12:25

Waiting indikation

Post by peteraj » 2020-07-17 11:45

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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Waiting indikation

Post by onoehring » 2020-07-17 12:03

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

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Waiting indikation

Post by D Oliveira » 2020-07-17 12:11

onoehring wrote:
2020-07-17 12:03
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
Posts: 27
Joined: 2016-02-05 12:25

Re: Waiting indikation

Post by peteraj » 2020-07-17 12:41

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Waiting indikation

Post by pbottcher » 2020-07-17 21:25

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);
	});
});
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Waiting indikation

Post by onoehring » 2020-07-18 07:01

Hi pbötcher,

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Waiting indikation

Post by pbottcher » 2020-07-18 09:08

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>
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

peteraj
Posts: 27
Joined: 2016-02-05 12:25

Re: Waiting indikation

Post by peteraj » 2020-07-21 06:28

Works like a charm! :-) Thanks pböttcher!

Post Reply