diff --git a/ws-wating.css b/ws-wating.css
index 6516809..fd599eb 100644
--- a/ws-wating.css
+++ b/ws-wating.css
@@ -1,10 +1,13 @@
+/* CSS LOADING */
+
.ws-wating {
+ /*display: none;*/
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
- background-color: rgba(0, 0, 0, .7);
+ background-color: rgba(0, 0, 0, 0.2);
z-index: 999999;
}
@@ -15,140 +18,79 @@
right: 0;
margin-left: auto;
margin-right: auto;
- width: 80px;
- height: 80px;
+ width: 60px;
+ height: 60px;
background-color: #0075ff;
border: 3px solid #FFF;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- -ms-border-radius: 50%;
- -o-border-radius: 50%;
border-radius: 50%;
- display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
align-items: center;
-ms-align-items: center;
align-items: center;
}
.ws-wating-load {
+ position: absolute;
+ top: 20px;
width: 100%;
- display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
-webkit-animation: aniWaiting 1.2s linear infinite;
- -moz-animation: aniWaiting 1.2s linear infinite;
- -ms-animation: aniWaiting 1.2s linear infinite;
- -o-animation: aniWaiting 1.2s linear infinite;
animation: aniWaiting 1.2s linear infinite;
}
.ws-wating-load:before {
content: "";
- width: 20px;
+ width: 10px;
height: 20px;
- background-color: yellow;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- -ms-border-radius: 50%;
- -o-border-radius: 50%;
+ background-color: #FFFFFF;
border-radius: 50%;
}
.ws-wating-text {
- position: absolute;
- top: 12px;
- width: 100%;
- font-size: 14px;
+ font-size: 11px;
color: #FFF;
text-align: center;
}
-.ws-wating-text p:first-of-type {
- font-weight: bold;
- color: yellow;
-}
-
-.ws-wating-text p:last-of-type {
- color: #DDD;
- font-size: 12px;
+.ws-wating-text p {
+ margin: 0;
+ line-height: 0;
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ top: 50%;
}
@-webkit-keyframes aniWaiting {
from {
-webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-@-moz-keyframes aniWaiting {
- from {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
-@-ms-keyframes aniWaiting {
+@keyframes aniWaiting {
from {
-webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
-@-o-keyframes aniWaiting {
- from {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes aniWaiting {
- from {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
\ No newline at end of file
+/* END CSS LOADING */
\ No newline at end of file
diff --git a/ws-wating.min.css b/ws-wating.min.css
deleted file mode 100644
index 7873f5c..0000000
--- a/ws-wating.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.ws-wating{position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,.7);z-index:999999}.ws-wating-content{position:absolute;top:calc(50% - 30px);left:0;right:0;margin-left:auto;margin-right:auto;width:80px;height:80px;background-color:#0075ff;border:3px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;align-items:center;-ms-align-items:center;align-items:center}.ws-wating-load{width:100%;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-animation:aniWaiting 1.2s linear infinite;-moz-animation:aniWaiting 1.2s linear infinite;-ms-animation:aniWaiting 1.2s linear infinite;-o-animation:aniWaiting 1.2s linear infinite;animation:aniWaiting 1.2s linear infinite}.ws-wating-load:before{content:"";width:20px;height:20px;background-color:#ff0;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.ws-wating-text{position:absolute;top:12px;width:100%;font-size:14px;color:#fff;text-align:center}.ws-wating-text p:first-of-type{font-weight:700;color:#ff0}.ws-wating-text p:last-of-type{color:#ddd;font-size:12px}@-webkit-keyframes aniWaiting{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes aniWaiting{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes aniWaiting{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes aniWaiting{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes aniWaiting{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
\ No newline at end of file