Skip to content

Commit 42e37e3

Browse files
jloguerciojloguercio
committed
Added CSS3 FormValidator loader instead *.*gif image
1 parent e400471 commit 42e37e3

File tree

2 files changed

+217
-2
lines changed

2 files changed

+217
-2
lines changed

‎app/Resources/public/css/base.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6855,3 +6855,215 @@ input.form-control[type="color"] {
68556855
.badge_sidebar_image_transparency{
68566856
opacity: 0.2;
68576857
}
6858+
6859+
/* CSS FormValidator loader */
6860+
.cssload-loader-walk {
6861+
width: 97px;
6862+
height: 39px;
6863+
position: absolute;
6864+
left: 50%;
6865+
top: 200px;
6866+
transform: translate(-50%, -50%);
6867+
-o-transform: translate(-50%, -50%);
6868+
-ms-transform: translate(-50%, -50%);
6869+
-webkit-transform: translate(-50%, -50%);
6870+
-moz-transform: translate(-50%, -50%);
6871+
}
6872+
.cssload-loader-walk > div {
6873+
content: "";
6874+
width: 19px;
6875+
height: 19px;
6876+
background: rgb(51,121,183);
6877+
border-radius: 100%;
6878+
position: absolute;
6879+
animation: cssload-animate 2.3s linear infinite;
6880+
-o-animation: cssload-animate 2.3s linear infinite;
6881+
-ms-animation: cssload-animate 2.3s linear infinite;
6882+
-webkit-animation: cssload-animate 2.3s linear infinite;
6883+
-moz-animation: cssload-animate 2.3s linear infinite;
6884+
}
6885+
.cssload-loader-walk > div:nth-of-type(1) {
6886+
animation-delay: -0.46s;
6887+
-o-animation-delay: -0.46s;
6888+
-ms-animation-delay: -0.46s;
6889+
-webkit-animation-delay: -0.46s;
6890+
-moz-animation-delay: -0.46s;
6891+
}
6892+
.cssload-loader-walk > div:nth-of-type(2) {
6893+
animation-delay: -0.92s;
6894+
-o-animation-delay: -0.92s;
6895+
-ms-animation-delay: -0.92s;
6896+
-webkit-animation-delay: -0.92s;
6897+
-moz-animation-delay: -0.92s;
6898+
}
6899+
.cssload-loader-walk > div:nth-of-type(3) {
6900+
animation-delay: -1.38s;
6901+
-o-animation-delay: -1.38s;
6902+
-ms-animation-delay: -1.38s;
6903+
-webkit-animation-delay: -1.38s;
6904+
-moz-animation-delay: -1.38s;
6905+
}
6906+
.cssload-loader-walk > div:nth-of-type(4) {
6907+
animation-delay: -1.84s;
6908+
-o-animation-delay: -1.84s;
6909+
-ms-animation-delay: -1.84s;
6910+
-webkit-animation-delay: -1.84s;
6911+
-moz-animation-delay: -1.84s;
6912+
}
6913+
6914+
6915+
6916+
@keyframes cssload-animate {
6917+
0% {
6918+
left: 97px;
6919+
top: 0;
6920+
}
6921+
80% {
6922+
left: 0;
6923+
top: 0;
6924+
}
6925+
85% {
6926+
left: 0;
6927+
top: -19px;
6928+
width: 19px;
6929+
height: 19px;
6930+
}
6931+
90% {
6932+
width: 39px;
6933+
height: 15px;
6934+
}
6935+
95% {
6936+
left: 97px;
6937+
top: -19px;
6938+
width: 19px;
6939+
height: 19px;
6940+
}
6941+
100% {
6942+
left: 97px;
6943+
top: 0;
6944+
}
6945+
}
6946+
6947+
@-o-keyframes cssload-animate {
6948+
0% {
6949+
left: 97px;
6950+
top: 0;
6951+
}
6952+
80% {
6953+
left: 0;
6954+
top: 0;
6955+
}
6956+
85% {
6957+
left: 0;
6958+
top: -19px;
6959+
width: 19px;
6960+
height: 19px;
6961+
}
6962+
90% {
6963+
width: 39px;
6964+
height: 15px;
6965+
}
6966+
95% {
6967+
left: 97px;
6968+
top: -19px;
6969+
width: 19px;
6970+
height: 19px;
6971+
}
6972+
100% {
6973+
left: 97px;
6974+
top: 0;
6975+
}
6976+
}
6977+
6978+
@-ms-keyframes cssload-animate {
6979+
0% {
6980+
left: 97px;
6981+
top: 0;
6982+
}
6983+
80% {
6984+
left: 0;
6985+
top: 0;
6986+
}
6987+
85% {
6988+
left: 0;
6989+
top: -19px;
6990+
width: 19px;
6991+
height: 19px;
6992+
}
6993+
90% {
6994+
width: 39px;
6995+
height: 15px;
6996+
}
6997+
95% {
6998+
left: 97px;
6999+
top: -19px;
7000+
width: 19px;
7001+
height: 19px;
7002+
}
7003+
100% {
7004+
left: 97px;
7005+
top: 0;
7006+
}
7007+
}
7008+
7009+
@-webkit-keyframes cssload-animate {
7010+
0% {
7011+
left: 97px;
7012+
top: 0;
7013+
}
7014+
80% {
7015+
left: 0;
7016+
top: 0;
7017+
}
7018+
85% {
7019+
left: 0;
7020+
top: -19px;
7021+
width: 19px;
7022+
height: 19px;
7023+
}
7024+
90% {
7025+
width: 39px;
7026+
height: 15px;
7027+
}
7028+
95% {
7029+
left: 97px;
7030+
top: -19px;
7031+
width: 19px;
7032+
height: 19px;
7033+
}
7034+
100% {
7035+
left: 97px;
7036+
top: 0;
7037+
}
7038+
}
7039+
7040+
@-moz-keyframes cssload-animate {
7041+
0% {
7042+
left: 97px;
7043+
top: 0;
7044+
}
7045+
80% {
7046+
left: 0;
7047+
top: 0;
7048+
}
7049+
85% {
7050+
left: 0;
7051+
top: -19px;
7052+
width: 19px;
7053+
height: 19px;
7054+
}
7055+
90% {
7056+
width: 39px;
7057+
height: 15px;
7058+
}
7059+
95% {
7060+
left: 97px;
7061+
top: -19px;
7062+
width: 19px;
7063+
height: 19px;
7064+
}
7065+
100% {
7066+
left: 97px;
7067+
top: 0;
7068+
}
7069+
}

‎main/inc/lib/formvalidator/FormValidator.class.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1153,13 +1153,16 @@ public function returnForm()
11531153
// Add div-element which is to hold the progress bar
11541154
$id = $this->getAttribute('id');
11551155
if (isset($this->with_progress_bar) && $this->with_progress_bar) {
1156-
$icon = Display::return_icon('progress_bar.gif');
1156+
// Deprecated
1157+
// $icon = Display::return_icon('progress_bar.gif');
11571158

11581159
// @todo improve UI
11591160
$returnValue .= '<br />
11601161
11611162
<div id="loading_div_'.$id.'" class="loading_div" style="display:none;margin-left:40%; margin-top:10px; height:50px;">
1162-
'.$icon.'
1163+
<div class="cssload-loader-walk">
1164+
<div></div><div></div><div></div><div></div><div></div>
1165+
</div>
11631166
</div>
11641167
';
11651168
}

0 commit comments

Comments
 (0)