Page 1 of 1
Waiting indikation
Posted: 2020-07-17 11:45
by 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
Re: Waiting indikation
Posted: 2020-07-17 12:03
by 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
Re: Waiting indikation
Posted: 2020-07-17 12:11
by D Oliveira
just adding to that you need a onchange or onclick event (javascript function) to trigger the .css change
Re: Waiting indikation
Posted: 2020-07-17 12:41
by peteraj
Thank you guys, does any of you have an example? I guess that I have to alter the tablename_view.php file?
Re: Waiting indikation
Posted: 2020-07-17 21:25
by 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);
});
});
Re: Waiting indikation
Posted: 2020-07-18 07:01
by onoehring
Hi pbötcher,
very nice. Thank you for the code - once again.
Olaf
Re: Waiting indikation
Posted: 2020-07-18 09:08
by 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>
Re: Waiting indikation
Posted: 2020-07-21 06:28
by peteraj
Works like a charm!
Thanks pböttcher!