Commit 5930a48e authored by Gabriel Engel's avatar Gabriel Engel Committed by GitHub

Merge pull request #5229 from RocketChat/rename-loading-animation

rename default loading animation
parents b33113ae 7f4f3bb6
......@@ -73,7 +73,7 @@
}
}
.setting-block {
.loading {
.loading-animation {
top: 30px;
}
&:hover {
......
@import "_variables.less";
.loading {
.loading-animation {
color: @secondary-font-color;
font-size: 1.3rem;
margin-left: 32px;
margin-top: 12px;
margin-bottom: 5px;
margin-left: 32px;
margin-top: 12px;
margin-bottom: 5px;
}
.loading > div {
width: 3px;
height: 3px;
background-color: @secondary-font-color;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
.loading-animation > div {
width: 3px;
height: 3px;
border-radius: 100%;
display: inline-block;
background-color: @secondary-font-color;
-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
}
.loading .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
.loading-animation .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loading .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
.loading-animation .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
@-webkit-keyframes loading-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
\ No newline at end of file
@keyframes loading-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
<template name="loading">
<div class="loading">
<div class="loading-animation">
{{_ "Connecting to an Agent"}}
<div class="bounce1"></div>
<div class="bounce2"></div>
......
......@@ -8,9 +8,6 @@ Template.mentionsFlexTab.helpers
message: ->
return _.extend(this, { customClass: 'mentions' })
notReadySubscription: ->
return 'notready' unless Template.instance().subscriptionsReady()
hasMore: ->
return Template.instance().hasMore.get()
......
.mentioned-messages-list {
&.notready {
background-image: url(images/logo/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 100px;
.message {
display: none;
}
}
li.empty {
text-align: center;
margin-top: 60px;
}
.message-cog-container {
.message-action {
display: none !important;
......@@ -23,11 +7,4 @@
}
}
}
.load-more {
text-transform: lowercase;
text-align: center;
line-height: 40px;
font-style: italic;
}
}
......@@ -2194,21 +2194,6 @@ label.required:after {
}
}
.message-popup-results {
&.notready {
.message-popup-items {
position: relative;
height: 100px;
.loading {
display: flex;
}
}
.popup-item {
display: none;
}
}
}
.message-popup-position {
position: relative;
}
......
......@@ -887,6 +887,6 @@ label.required:after {
color: @error-contrast;
}
.loading.dark > div {
.loading-animation.dark > div {
background-color: @transparent-darkest;
}
<template name="loading">
<div class="loading {{#if dark}}dark{{/if}}">
<div class="loading-animation {{#if dark}}dark{{/if}}">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
......
......@@ -2,7 +2,7 @@
Inject.rawBody('page-loading', `
<style>
.loading {
.loading-animation {
top: 0;
right: 0;
bottom: 0;
......@@ -13,35 +13,39 @@ Inject.rawBody('page-loading', `
justify-content: center;
text-align: center;
}
.loading > div {
.loading-animation > div {
width: 10px;
height: 10px;
margin: 2px;
border-radius: 100%;
display: inline-block;
background-color: rgba(255,255,255,0.8);
-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
background-color: rgba(255,255,255,0.8);
}
.loading .bounce1 {
.loading-animation .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loading .bounce2 {
.loading-animation .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes loading-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
0%,
80%,
100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes loading-bouncedelay {
0%, 80%, 100% { transform: scale(0); }
0%,
80%,
100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
</style>
<div id="initial-page-loading" class="page-loading">
<div class="loading">
<div class="loading-animation">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment