moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 15:58:49 -05:00
Code Issues Releases Wiki Activity

implement spinner in pure css

Browse Source
This commit is contained in:
Tankred Hase 2013-11-06 15:15:36 +01:00
parent 20b00ce1c5
commit b5c619dd56
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/sass/views/_mail-list.scss
View File

@ -56,6 +56,34 @@
font-size: $font-size-smaller;
color: $color-grey-dark;
line-height: em(28,12);
&.syncing {
.spinner {
top: 6.5px;
left: $padding-horizontal;
height: 13px;
width: 13px;
position: absolute;
animation: rotation .6s linear infinite;
border-left: 2px solid $color-grey-light;
border-right: 2px solid $color-grey-light;
border-bottom: 2px solid $color-grey-light;
border-top: 2px solid $color-grey;
border-radius: 100%;
}
.text {
padding-left: 1.5em;
}
}
}
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

5
src/tpl/mail-list.html
View File

@ -17,7 +17,8 @@
</ul><!--/.mail-list-->
</div>
<footer ng-click="synchronize()">
{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
<footer ng-class="{syncing: lastUpdateLbl === 'Syncing ...'}" ng-click="synchronize()">
<span class="spinner"></span>
<span class="text">{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}</span>
</footer>
</div><!--/.view-mail-list-->