Loading page effect

stable
Xavier Julián 2014-08-14 14:33:44 +02:00
parent 2c94ee0ce7
commit 1d0c127da9
5 changed files with 35 additions and 28 deletions

View File

@ -24,7 +24,7 @@
configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoaderProvider) ->
$routeProvider.when("/", {templateUrl: "/partials/projects.html"})
$routeProvider.when("/project/:pslug/", {templateUrl: "/partials/project.html"})
$routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html"})
$routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html", resolve: {loader: tgLoaderProvider.add(true)}})
$routeProvider.when("/project/:pslug/taskboard/:id", {templateUrl: "/partials/taskboard.html"})
$routeProvider.when("/project/:pslug/search", {templateUrl: "/partials/search.html", reloadOnSearch: false})
$routeProvider.when("/project/:pslug/kanban", {templateUrl: "/partials/kanban.html"})
@ -45,7 +45,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoade
# Wiki
$routeProvider.when("/project/:pslug/wiki",
{redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"})
{redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"}, )
$routeProvider.when("/project/:pslug/wiki/:slug",
{templateUrl: "/partials/wiki.html"})
@ -54,7 +54,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoade
{templateUrl: "/partials/wiki-edit.html"})
# Issues
$routeProvider.when("/project/:pslug/issues", {templateUrl: "/partials/issues.html"})
$routeProvider.when("/project/:pslug/issues", {templateUrl: "/partials/issues.html", resolve: {loader: tgLoaderProvider.add(true)}})
$routeProvider.when("/project/:pslug/issues/:issueref",
{templateUrl: "/partials/issues-detail.html"})

View File

@ -37,7 +37,7 @@ Loader = () ->
defaultConfig = {
enabled: false,
minTime: 500,
minTime: 3000,
auto: false
}

View File

@ -1,3 +1,4 @@
.loader(tg-loader)
.bg
.info Loading ...
div.container
include ../components/spinner
p Loading...

View File

@ -1,34 +1,40 @@
.loader {
@include transition(opacity .5s linear);
background-color: $white;
bottom: 0;
display: none;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
.bg {
background-color: $black;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 20;
z-index: 99900;
.container {
margin: 0 auto;
margin-top: 15%;
position: relative;
width: 150px;
}
.info {
background-color: $black;
color: $white;
padding: .5rem 3rem;
position: absolute;
right: 20px;
top: 20px;
z-index: 25;
}
&.active {
display: block;
.bg {
opacity: .7;
.spinner {
background-color: $white;
box-shadow: 1px 1px 10px rgba($whitish, .9);
.icon {
color: $gray-light;
text-shadow: 1px 1px 3px $whitish, 0 0 0 $grayer, 1px 1px 3px $whitish;
}
}
p {
@extend %large;
color: $gray-light;
padding-top: 20px;
text-align: center;
}
&.active {
@include transition(opacity .5s linear);
background-color: rgba($white, .9);
display: block;
opacity: 1;
}
}

View File

@ -8,7 +8,7 @@
position: relative;
width: 7rem;
.icon {
@include animation(fadeIn infinite 6s ease-in-out);
@include animation(fadeIn 6s linear);
@extend %xxlarge;
border-radius: 5%;
color: darken($green-taiga, 15%);