Apps
/
MobileApp
2
0
Fork 0
Code Issues Pull Requests Releases 5 Wiki Activity

Replace SVG spinner with GIF (closes #11), decrease splash screen time

Browse Source
Framework7
Skylar Ittner 6 years ago
parent 29351714eb
commit 32582718df
7 changed files with 6 additions and 147 deletions
Show Stats Download Patch File Download Diff File

1
config.xml
Unescape Escape View File

@ -38,7 +38,6 @@
<splash qualifier="land-xxhdpi" src="res/screens/android/screen-xxhdpi-landscape.png" />
<splash qualifier="land-xxxhdpi" src="res/screens/android/screen-xxxhdpi-landscape.png" />
</platform>
<preference name="SplashScreenDelay" value="3000" />
<preference name="AutoHideSplashScreen" value="false" />
<engine name="android" spec="^6.3.0" />
<plugin name="cordova-plugin-app-version" spec="^0.1.9" />

67
www/css/spinner.css
Unescape Escape View File

@ -1,67 +0,0 @@
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
.spinner .path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
stroke: #448aff;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}

BIN
www/img/loader.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

6
www/index.html
Unescape Escape View File

@ -31,7 +31,7 @@
<span class="navbar-brand" id="navbar-title" style="color: white;">Business</span>
</div>
<ul class="nav navbar-nav navbar-right" id="navbar-buttons">
</ul>
</div>
</nav>
@ -40,9 +40,7 @@
<div class="app-dock-container">
<div class="app-dock" id="app-dock">
<div style="margin-top: 50px;">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
<img src="img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
</div>
<div style="width: 100%;"></div>
<p class="loading-text">Loading...</p>

2
www/js/app.js
Unescape Escape View File

@ -272,5 +272,5 @@ document.addEventListener("deviceready", function () {
} else {
openscreen("setup1");
}
setTimeout(navigator.splashscreen.hide, 1000);
setTimeout(navigator.splashscreen.hide, 500);
}, false);

73
www/views/appspinner.html
Unescape Escape View File

@ -20,74 +20,6 @@
flex-direction: column;
}
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
.spinner .path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
stroke: #448aff;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
#statustext {
text-align: center;
}
@ -113,9 +45,8 @@
position: relative;
}
</style>
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
<img src="file:///android_asset/www/img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
<p id="statustext">Logging in...</p>
<br />

4
www/views/home.html
Unescape Escape View File

@ -4,9 +4,7 @@
<div class="app-dock-container">
<div class="app-dock" id="app-dock">
<div style="margin-top: 50px;">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
<img src="img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
</div>
<div style="width: 100%;"></div>
<p class="loading-text">Loading...</p>

Write Preview
Loading…
Cancel
Save