IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

separated fade-ins for logo and text, tweaked delays and timing for fade-in animations

Browse Source
This commit is contained in:
Patrick O'Carroll 2018-08-31 08:41:17 +02:00
parent 77f9b152fa
commit bc30e7b322
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/views/index.template.html
View File

@ -50,8 +50,8 @@
opacity: 0;
animation-name: preloader-fade-in;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 2s;
animation-duration: .9s;
animation-delay: 1.35s;
animation-fill-mode: forwards;
}
@ -79,6 +79,11 @@
font-weight: 500;
font-size: 14px;
font-family: 'Roboto';
opacity: 0;
animation-name: preloader-fade-in;
animation-duration: .9s;
animation-delay: 1.8s;
animation-fill-mode: forwards;
}
.theme-light .preloader__text {
@ -92,7 +97,8 @@
@keyframes preloader-fade-in {
0% {
opacity: 0;
animation-timing-function: linear;
/*animation-timing-function: linear;*/
animation-timing-function: cubic-bezier(0, 0, 0.5, 1)
}
100% {
opacity: 1;
@ -149,11 +155,10 @@
<div class="preloader">
<div class="preloader__enter">
<div class="preloader__bounce">
<div class="preloader__logo">
</div>
<div class="preloader__logo"></div>
</div>
<div class="preloader__text">Loading Grafana</div>
</div>
<div class="preloader__text">Loading Grafana</div>
</div>
<grafana-app class="grafana-app" ng-cloak>