chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added new CSS3 FormValidator Loader

Browse Source
pull/2487/head
José Loguercio 7 years ago
parent e5288d9e86
commit 6fe32643fb
2 changed files with 240 additions and 183 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 433
      app/Resources/public/css/base.css
  2. 4
      main/inc/lib/formvalidator/FormValidator.class.php

433
app/Resources/public/css/base.css
Unescape View File

@ -6857,213 +6857,272 @@ input.form-control[type="color"] {
}
/* CSS FormValidator loader */
.cssload-loader-walk {
width: 97px;
height: 39px;
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.cssload-loader-walk > div {
content: "";
width: 19px;
height: 19px;
background: rgb(51,121,183);
border-radius: 100%;
position: absolute;
animation: cssload-animate 2.3s linear infinite;
-o-animation: cssload-animate 2.3s linear infinite;
-ms-animation: cssload-animate 2.3s linear infinite;
-webkit-animation: cssload-animate 2.3s linear infinite;
-moz-animation: cssload-animate 2.3s linear infinite;
}
.cssload-loader-walk > div:nth-of-type(1) {
animation-delay: -0.46s;
-o-animation-delay: -0.46s;
-ms-animation-delay: -0.46s;
-webkit-animation-delay: -0.46s;
-moz-animation-delay: -0.46s;
}
.cssload-loader-walk > div:nth-of-type(2) {
animation-delay: -0.92s;
-o-animation-delay: -0.92s;
-ms-animation-delay: -0.92s;
-webkit-animation-delay: -0.92s;
-moz-animation-delay: -0.92s;
}
.cssload-loader-walk > div:nth-of-type(3) {
animation-delay: -1.38s;
-o-animation-delay: -1.38s;
-ms-animation-delay: -1.38s;
-webkit-animation-delay: -1.38s;
-moz-animation-delay: -1.38s;
}
.cssload-loader-walk > div:nth-of-type(4) {
animation-delay: -1.84s;
-o-animation-delay: -1.84s;
-ms-animation-delay: -1.84s;
-webkit-animation-delay: -1.84s;
-moz-animation-delay: -1.84s;
}
@keyframes cssload-animate {
@-moz-keyframes wobblebar-loader {
0% {
left: 97px;
top: 0;
left: 4px;
}
80% {
left: 0;
top: 0;
3% {
left: 204px;
}
85% {
left: 0;
top: -19px;
width: 19px;
height: 19px;
}
90% {
width: 39px;
height: 15px;
}
95% {
left: 97px;
top: -19px;
width: 19px;
height: 19px;
}
100% {
left: 97px;
top: 0;
6% {
left: 4px;
}
9% {
left: 204px;
}
@-o-keyframes cssload-animate {
0% {
left: 97px;
top: 0;
12% {
left: 4px;
}
80% {
left: 0;
top: 0;
15% {
left: 204px;
}
85% {
left: 0;
top: -19px;
width: 19px;
height: 19px;
}
90% {
width: 39px;
height: 15px;
}
95% {
left: 97px;
top: -19px;
width: 19px;
height: 19px;
}
100% {
left: 97px;
top: 0;
18% {
left: 32px;
}
27% {
left: 32px;
}
@-ms-keyframes cssload-animate {
0% {
left: 97px;
top: 0;
30% {
left: 204px;
}
80% {
left: 0;
top: 0;
33% {
left: 4px;
}
85% {
left: 0;
top: -19px;
width: 19px;
height: 19px;
}
90% {
width: 39px;
height: 15px;
}
95% {
left: 97px;
top: -19px;
width: 19px;
height: 19px;
}
100% {
left: 97px;
top: 0;
36% {
left: 204px;
}
39% {
left: 4px;
}
42% {
left: 204px;
}
@-webkit-keyframes cssload-animate {
45% {
left: 4px;
}
48% {
left: 204px;
}
51% {
left: 152px;
}
63% {
left: 152px;
}
66% {
left: 4px;
}
69% {
left: 204px;
}
72% {
left: 4px;
}
75% {
left: 204px;
}
78% {
left: 4px;
}
81% {
left: 204px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 204px;
}
}
@-webkit-keyframes wobblebar-loader {
0% {
left: 97px;
top: 0;
left: 4px;
}
80% {
left: 0;
top: 0;
3% {
left: 204px;
}
85% {
left: 0;
top: -19px;
width: 19px;
height: 19px;
}
90% {
width: 39px;
height: 15px;
}
95% {
left: 97px;
top: -19px;
width: 19px;
height: 19px;
}
100% {
left: 97px;
top: 0;
6% {
left: 4px;
}
9% {
left: 204px;
}
@-moz-keyframes cssload-animate {
12% {
left: 4px;
}
15% {
left: 204px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 204px;
}
33% {
left: 4px;
}
36% {
left: 204px;
}
39% {
left: 4px;
}
42% {
left: 204px;
}
45% {
left: 4px;
}
48% {
left: 204px;
}
51% {
left: 152px;
}
63% {
left: 152px;
}
66% {
left: 4px;
}
69% {
left: 204px;
}
72% {
left: 4px;
}
75% {
left: 204px;
}
78% {
left: 4px;
}
81% {
left: 204px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 204px;
}
}
@keyframes wobblebar-loader {
0% {
left: 97px;
top: 0;
left: 4px;
}
80% {
left: 0;
top: 0;
3% {
left: 204px;
}
85% {
left: 0;
top: -19px;
width: 19px;
height: 19px;
}
90% {
width: 39px;
height: 15px;
}
95% {
left: 97px;
top: -19px;
width: 19px;
height: 19px;
}
100% {
left: 97px;
top: 0;
6% {
left: 4px;
}
9% {
left: 204px;
}
12% {
left: 4px;
}
15% {
left: 204px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 204px;
}
33% {
left: 4px;
}
36% {
left: 204px;
}
39% {
left: 4px;
}
42% {
left: 204px;
}
45% {
left: 4px;
}
48% {
left: 204px;
}
51% {
left: 152px;
}
63% {
left: 152px;
}
66% {
left: 4px;
}
69% {
left: 204px;
}
72% {
left: 4px;
}
75% {
left: 204px;
}
78% {
left: 4px;
}
81% {
left: 204px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 204px;
}
}
/* :not(:required) hides this rule from IE9 and below */
.wobblebar-loader:not(:required) {
background: #2E6DA4;
-moz-border-radius: 10.66667px;
-webkit-border-radius: 10.66667px;
border-radius: 10.66667px;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
width: 228px;
height: 21.33333px;
position: relative;
}
.wobblebar-loader:not(:required)::after {
-moz-animation: wobblebar-loader 15000ms infinite ease;
-webkit-animation: wobblebar-loader 15000ms infinite ease;
animation: wobblebar-loader 15000ms infinite ease;
background: white;
display: block;
-moz-border-radius: 7.11111px;
-webkit-border-radius: 7.11111px;
border-radius: 7.11111px;
content: '';
position: absolute;
top: 3.55556px;
left: 4px;
width: 21.33333px;
height: 14.22222px;
}

4
main/inc/lib/formvalidator/FormValidator.class.php
Unescape View File

@ -1160,9 +1160,7 @@ EOT;
$returnValue .= '<br />
<div id="loading_div_'.$id.'" class="loading_div" style="display:none;margin-left:40%; margin-top:10px; height:50px;">
<div class="cssload-loader-walk">
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="wobblebar-loader"></div>
</div>
';
}

Write Preview
Loading…
Cancel
Save