diff options
author | Joram Wilander <jwawilander@gmail.com> | 2015-07-02 20:09:16 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2015-07-02 20:09:16 -0400 |
commit | 3a8059e477d7b1c9c628a1cbc50c17db5d4a21f4 (patch) | |
tree | b3a378d8b71885cf0136ebcf755e6cc62d46ef00 /web/sass-files/sass/partials | |
parent | 681d4d3b78f06f669f7943cb13b5774e7656c740 (diff) | |
parent | 1a1b29ee6c1aa20a5f608f57616b078f0dbbbe51 (diff) | |
download | chat-3a8059e477d7b1c9c628a1cbc50c17db5d4a21f4.tar.gz chat-3a8059e477d7b1c9c628a1cbc50c17db5d4a21f4.tar.bz2 chat-3a8059e477d7b1c9c628a1cbc50c17db5d4a21f4.zip |
Merge pull request #126 from rgarmsen2295/mm-1210
MM-1210 Added loading animation that is used while posts in a channel load
Diffstat (limited to 'web/sass-files/sass/partials')
-rw-r--r-- | web/sass-files/sass/partials/_loading.scss | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss new file mode 100644 index 000000000..185a42180 --- /dev/null +++ b/web/sass-files/sass/partials/_loading.scss @@ -0,0 +1,68 @@ +.loading-screen { + display: table; + width: 100%; + height: 100%; + position: absolute; + @include box-sizing(border-box); + text-align: center; + .loading__content { + display: table-cell; + vertical-align: middle; + h3 { + font-weight: 400; + margin: 0 0.2em 0; + display: inline-block; + } + } +} + +.loading-screen { + .loading__content { + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 1px; + opacity: 0.1; + @include border-radius(10px); + -moz-animation: move 0.75s infinite linear; + -webkit-animation: move 0.75s infinite linear; + } + + #round_1 { + -moz-animation-delay: .2s; + -webkit-animation-delay: .2s; + } + + #round_2 { + -moz-animation-delay: .4s; + -webkit-animation-delay: .4s; + } + + #round_3 { + -moz-animation-delay: .6s; + -webkit-animation-delay: .6s; + } + + @-moz-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + + @-webkit-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + } +} |