diff --git a/css/src/main.css b/css/src/main.css index cb5eef542..fb6788bd4 100644 --- a/css/src/main.css +++ b/css/src/main.css @@ -1367,18 +1367,6 @@ a.text-warning:hover {color: #FD7262;} background-color: #1ABC9C; } -.loading-screen { - text-align: center; - background-color: #1ABC9C; - width: 100%; - margin-top: 15%; -} - -.loading-screen .spinner { - vertical-align: middle; - margin-right: 15px; -} - .box-setup .panel { background-color: #2C3E50; padding: 1rem; @@ -1538,3 +1526,60 @@ a.text-warning:hover {color: #FD7262;} color: #FFFFFF; } +/*///////////////////////// LOADING /////////////////////////*/ +.contener_mixte { + width:44px; height:44px; position:absolute; +} + +.ballcolor { + width: 20px; + height: 20px; + border-radius: 50%; +} + +.contener_general { + width:44px; height:44px; + margin: 20px auto 20px; +} + +.ball_1, .ball_2, .ball_3, .ball_4 { + position: absolute; +} + +.ball_1 { + background-color:#3498DB; + top:0; left:0; +} + +.ball_2 { + background-color:#C0392A; + top:0; left:24px; +} + +.ball_3 { + background-color:#00a096; + top:24px; left:0; +} + +.ball_4 { + background-color:#2C3E50; + top:24px; left:24px; +} + +.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;} + +.loading-screen { + background-color: #F2F5F8; + width: 100%; + height: 100%; + position: absolute; + z-index: 999; + top: 0; + left: 0; +} + +.loading-screen .spinner { + margin-top: 20%; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/css/src/style.css b/css/src/style.css index 5249a3f8d..a40efc226 100644 --- a/css/src/style.css +++ b/css/src/style.css @@ -96,6 +96,21 @@ content: "\e60e"; } + +.contener_general { + -webkit-animation:animball_two 1s infinite; + -moz-animation:animball_two 1s infinite; + -ms-animation:animball_two 1s infinite; + animation:animball_two 1s infinite; +} + +.ball_1, .ball_2, .ball_3, .ball_4 { + -webkit-animation:animball_one 1s infinite ease; + -moz-animation:animball_one 1s infinite ease; + -ms-animation:animball_one 1s infinite ease; + animation:animball_one 1s infinite ease; +} + .side-nav.wallets { -webkit-transition: height 250ms ease-in; -moz-transition: height 250ms ease-in; @@ -1361,3 +1376,53 @@ stretchRight -ms-transform: translateY(0%); } } + +@-webkit-keyframes animball_one +{ + 0%{ position: absolute;} + 50%{top:12px; left:12px; position: absolute;opacity:0.5;} + 100%{ position: absolute;} +} +@-moz-keyframes animball_one +{ + 0%{ position: absolute;} + 50%{top:12px; left:12px; position: absolute;opacity:0.5;} + 100%{ position: absolute;} +} +@-ms-keyframes animball_one +{ + 0%{ position: absolute;} + 50%{top:12px; left:12px; position: absolute;opacity:0.5;} + 100%{ position: absolute;} +} +@keyframes animball_one +{ + 0%{ position: absolute;} + 50%{top:12px; left:12px; position: absolute;opacity:0.5;} + 100%{ position: absolute;} +} + +@-webkit-keyframes animball_two +{ + 0%{-webkit-transform:rotate(0deg) scale(1);} + 50%{-webkit-transform:rotate(360deg) scale(1.3);} + 100%{-webkit-transform:rotate(720deg) scale(1);} +} +@-moz-keyframes animball_two +{ + 0%{-moz-transform:rotate(0deg) scale(1);} + 50%{-moz-transform:rotate(360deg) scale(1.3);} + 100%{-moz-transform:rotate(720deg) scale(1);} +} +@-ms-keyframes animball_two +{ + 0%{-ms-transform:rotate(0deg) scale(1);} + 50%{-ms-transform:rotate(360deg) scale(1.3);} + 100%{-ms-transform:rotate(720deg) scale(1);} +} +@keyframes animball_two +{ + 0%{transform:rotate(0deg) scale(1);} + 50%{transform:rotate(360deg) scale(1.3);} + 100%{transform:rotate(720deg) scale(1);} +} \ No newline at end of file diff --git a/index.html b/index.html index 051f6fa33..41424f99e 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,19 @@