dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved loading animation bars -> removed *.svg animatin added new CSS animation

Browse Source
This commit is contained in:
Exodus4D
2016-01-11 23:42:04 +01:00
parent cac71716fb
commit 32ac4dbabf
5 changed files with 84 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/pathfinder.css
View File

File diff suppressed because one or more lines are too long

17
public/img/loading-bars.svg
View File

@@ -1,17 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#5cb85c">
<path transform="translate(2)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(8)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(14)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(20)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(26)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

7
public/templates/ui/splash.html
View File

@@ -5,6 +5,11 @@
<p class="lead">
<em class="pf-brand">pathfinder</em> is an open source mapping tool for <em class="pf-brand"><a href="http://www.eveonline.com/" target="_blank">EVE ONLINE</a></em>.
</p>
<img src="public/img/loading-bars.svg" width="48" height="48">
<div class="pf-loading-bars-container">
<ul class="pf-loading-bars-loader">
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
</div>
</div>

3
sass/layout/_all.scss
View File

@@ -8,4 +8,5 @@
@import "_dialogs";
@import "_log";
@import "_animation";
@import "_ribbon";
@import "_ribbon";
@import "_loading-bar";

75
sass/layout/_loading-bar.scss Normal file
View File

@@ -0,0 +1,75 @@
.pf-loading-bars-container{
position: relative;
z-index: 4;
margin: 0 auto;
left: 5px;
right: 19px;
width: 70px;
height: 50px;
list-style: none;
.pf-loading-bars-loader{
position: absolute;
z-index: 3;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
margin-top: -19px;
width: 56px;
height: 37px;
list-style: none;
li{
background-color: $green;
width: 6px;
height: 6px;
float: right;
margin-right: 3px !important;
@include box-shadow(0px 12px 6px rgba(0,0,0,0.2));
&:first-child{
@include animation( cssload-loadbars 1.75s cubic-bezier(0.645,0.045,0.355,1) infinite 0s );
}
&:nth-child(2){
@include animation( cssload-loadbars 1.75s ease-in-out infinite -0.35s );
}
&:nth-child(3){
@include animation( cssload-loadbars 1.75s ease-in-out infinite -0.7s );
}
&:nth-child(4){
@include animation( cssload-loadbars 1.75s ease-in-out infinite -1.05s );
}
&:nth-child(5){
@include animation( cssload-loadbars 1.75s ease-in-out infinite -1.4s );
}
&:nth-child(6){
@include animation( cssload-loadbars 1.75s ease-in-out infinite -1.75s );
}
}
}
}
@include keyframes(cssload-loadbars){
0%{
height: 6px;
margin-top: 16px;
}
33%{
height: 6px;
margin-top: 16px;
}
66%{
height:31px;
margin-top: 0px;
}
100%{
height: 6px;
margin-top: 16px;
}
}