IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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; opacity: 0;
animation-name: preloader-fade-in; animation-name: preloader-fade-in;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-duration: 2s; animation-duration: .9s;
animation-delay: 2s; animation-delay: 1.35s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@ -79,6 +79,11 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
font-family: 'Roboto'; 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 { .theme-light .preloader__text {
@ -92,7 +97,8 @@
@keyframes preloader-fade-in { @keyframes preloader-fade-in {
0% { 0% {
opacity: 0; opacity: 0;
animation-timing-function: linear; /*animation-timing-function: linear;*/
animation-timing-function: cubic-bezier(0, 0, 0.5, 1)
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -149,11 +155,10 @@
<div class="preloader"> <div class="preloader">
<div class="preloader__enter"> <div class="preloader__enter">
<div class="preloader__bounce"> <div class="preloader__bounce">
<div class="preloader__logo"> <div class="preloader__logo"></div>
</div>
</div> </div>
<div class="preloader__text">Loading Grafana</div>
</div> </div>
<div class="preloader__text">Loading Grafana</div>
</div> </div>
<grafana-app class="grafana-app" ng-cloak> <grafana-app class="grafana-app" ng-cloak>