r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'improve-loading-indicator-208' of https://github.com/sergi/webogram into sergi-improve-loading-indicator-208

Browse Source
This commit is contained in:
Igor Zhukov 2014-04-01 15:01:56 +04:00
commit 3a9e8e398a
2 changed files with 90 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/css/app.css
View File

@ -2706,4 +2706,91 @@ ce671b orange
.modal-content-animated {
-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
View File

@ -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>');
}
})