Browse Source

Eliminate DOM modification + lots of reflow to show the 'loading' indicator. Fix #208.

master
Sergi Mansilla 11 years ago
parent
commit
b5f70373dc
  1. 87
      app/css/app.css
  2. 25
      app/js/directives.js

87
app/css/app.css

@ -2707,3 +2707,90 @@ ce671b orange @@ -2707,3 +2707,90 @@ ce671b orange
-webkit-transition: margin-top linear 0.2s;
transition: margin-top linear 0.2s;
}
.loading_dots
{
display: inline-block;
font-size: 1em; /* set size here */
line-height: 1;
padding: 0.125em 0 0.175em 0.55em;
width: 2.75em;
}
.loading_dots span
{
border-radius: 50%;
display: inline-block;
height: 0.2rem;
width: 0.2rem;
margin-left: 0.2rem;
-webkit-animation: loading_dots 0.8s linear infinite;
-moz-animation: loading_dots 0.8s linear infinite;
-ms-animation: loading_dots 0.8s linear infinite;
animation: loading_dots 0.8s linear infinite;
}
.loading_dots span:nth-child(2)
{
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading_dots span:nth-child(1)
{
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #000;
}
100% {
background: transparent;
}
}
@-moz-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #000;
}
100% {
background: transparent;
}
}
@-ms-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #000;
}
100% {
background: transparent;
}
}
@keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #000;
}
100% {
background: transparent;
}
}

25
app/js/directives.js

@ -875,30 +875,9 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -875,30 +875,9 @@ angular.module('myApp.directives', ['myApp.filters'])
link: link,
};
var interval;
function link ($scope, element, attrs) {
var promise = $interval(function () {
var time = tsNow(),
cnt = 3;
if (time % 1000 <= 200) {
cnt = 0;
} else if (time % 1000 <= 400) {
cnt = 1;
} else if (time % 1000 <= 600) {
cnt = 2;
}
var text = '...',
html = text.substr(0, cnt + 1) + (cnt < 2 ? ('<span class="text-invisible">' + text.substr(cnt + 1) + '</span>') : '');
element.html(html);
}, 200);
$scope.$on('$destroy', function cleanup() {
$interval.cancel(promise);
});
element.html('<div class="loading_dots"><span></span>' +
'<span></span><span></span></div>');
}
})

Loading…
Cancel
Save