mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
Added new files for adding new loading animation
This commit is contained in:
3
web/react/components/loading_posts.jsx
Normal file
3
web/react/components/loading_posts.jsx
Normal file
@@ -0,0 +1,3 @@
|
||||
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
68
web/sass-files/sass/partials/_loading.scss
Normal file
68
web/sass-files/sass/partials/_loading.scss
Normal file
@@ -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;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user