-
-
-
-
-
+
+
-
Loading messages...
-
`;
elements.appContainer.classList.remove('no-active-chat');
diff --git a/loading.css b/loading.css
index ae2f8c9..10e4ab3 100644
--- a/loading.css
+++ b/loading.css
@@ -1,91 +1,116 @@
-.dots {
+.loading-animation-wrapper {
+ width: 200px;
+ height: 40px;
+ margin: 10px auto 0 auto;
+ padding-top: 4px;
+}
+.loading-animation-wrapper .caption {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ color: #fff;
+ font: 12px/1.4em Arial;
+}
+.loading-animation-wrapper .dot {
position: relative;
- width: 100%;
-}
-
-.dots span:nth-child(1) {
- animation-delay: 0.05s;
-}
-
-.dots span:nth-child(1):after {
- left: -20px;
-}
-
-.dots span:nth-child(2) {
- animation-delay: 0.1s;
-}
-
-.dots span:nth-child(2):after {
- left: -40px;
-}
-
-.dots span:nth-child(3) {
- animation-delay: 0.15s;
-}
-
-.dots span:nth-child(3):after {
- left: -60px;
-}
-
-.dots span:nth-child(4) {
- animation-delay: 0.2s;
-}
-
-.dots span:nth-child(4):after {
- left: -80px;
-}
-
-.dots span:nth-child(5) {
- animation-delay: 0.25s;
-}
-
-.dots span:nth-child(5):after {
- left: -100px;
-}
-
-.dots span {
display: inline-block;
- position: absolute;
- animation-duration: 4s;
- animation-iteration-count: infinite;
+ width: 10px;
+ height: 10px;
+ background: #fff;
+ -moz-border-radius: 100%;
+ -webkit-border-radius: 100%;
+ border-radius: 100%;
+ -moz-animation: movingdot 4s infinite;
+ -webkit-animation: movingdot 4s infinite;
+ animation: movingdot 4s infinite;
+ -moz-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+ -webkit-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+ animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+ -moz-animation-fill-mode: both;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+.loading-animation-wrapper .dot:nth-child(1) {
+ -moz-animation-delay: 1s;
+ -webkit-animation-delay: 1s;
+ animation-delay: 1s;
+}
+.loading-animation-wrapper .dot:nth-child(2) {
+ -moz-animation-delay: 0.9s;
+ -webkit-animation-delay: 0.9s;
+ animation-delay: 0.9s;
+}
+.loading-animation-wrapper .dot:nth-child(3) {
+ -moz-animation-delay: 0.8s;
+ -webkit-animation-delay: 0.8s;
+ animation-delay: 0.8s;
+}
+.loading-animation-wrapper .dot:nth-child(4) {
+ -moz-animation-delay: 0.7s;
+ -webkit-animation-delay: 0.7s;
+ animation-delay: 0.7s;
+}
+.loading-animation-wrapper .dot:nth-child(5) {
+ -moz-animation-delay: 0.6s;
+ -webkit-animation-delay: 0.6s;
+ animation-delay: 0.6s;
}
-.dots span:after {
- content: "";
- position: absolute;
- display: inline-block;
- background-color: #f0f0f0;
- width: 8px;
- height: 8px;
- border-radius: 50%;
-}
-
-.dots.animate span {
- animation-name: dots;
-}
-
-@keyframes dots {
- 0%,20% {
- left: 0;
- animation-timing-function: ease-out;
+@-moz-keyframes movingdot {
+ 0% {
+ -moz-transform: translateX(-30px);
+ transform: translateX(-30px);
opacity: 0;
}
25% {
opacity: 1;
}
- 35% {
- left: 45%;
- animation-timing-function: linear;
- }
- 65% {
- left: 55%;
- animation-timing-function: ease-in;
- }
- 75% {
- opacity: 1;
- }
- 80%,100% {
- left: 100%;
+ 50% {
+ -moz-transform: translateX(200px);
+ transform: translateX(200px);
opacity: 0;
}
-}
\ No newline at end of file
+ 100% {
+ opacity: 0;
+ }
+}
+@-webkit-keyframes movingdot {
+ 0% {
+ -webkit-transform: translateX(-30px);
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+ 25% {
+ opacity: 1;
+ }
+ 50% {
+ -webkit-transform: translateX(200px);
+ transform: translateX(200px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+@keyframes movingdot {
+ 0% {
+ -moz-transform: translateX(-30px);
+ -ms-transform: translateX(-30px);
+ -webkit-transform: translateX(-30px);
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+ 25% {
+ opacity: 1;
+ }
+ 50% {
+ -moz-transform: translateX(200px);
+ -ms-transform: translateX(200px);
+ -webkit-transform: translateX(200px);
+ transform: translateX(200px);
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0;
+ }
+}