I have opened a StackOverflow thread, please read my whole question there and answer either on SO or here.
http://stackoverflow.com/questions/1...sencha-touch-2
Answered: How to show Loading Screen
I have opened a StackOverflow thread, please read my whole question there and answer either on SO or here.
http://stackoverflow.com/questions/1...sencha-touch-2
See the default index.html file when you generate a Sencha app. It would be much easier if you're just gonna show a static image.
Notice the <div id="appLoadingIndicator">
Code:<!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>MyApp</title> <style type="text/css"> /** * Example of an initial loading indicator. * It is recommended to keep this as minimal as possible to provide instant feedback * while other resources are still being loaded for the first time */ html, body { height: 100%; } #appLoadingIndicator { position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -50px; width: 100px; height: 20px; } #appLoadingIndicator > * { background-color: #FFFFFF; float: left; height: 20px; margin-left: 11px; width: 20px; -webkit-animation-name: appLoadingIndicator; -webkit-border-radius: 13px; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; opacity: 0.3 } #appLoadingIndicator > :nth-child(1) { -webkit-animation-delay: 0.18s; } #appLoadingIndicator > :nth-child(2) { -webkit-animation-delay: 0.42s; } #appLoadingIndicator > :nth-child(3) { -webkit-animation-delay: 0.54s; } @-webkit-keyframes appLoadingIndicator{ 0% { opacity: 0.3 } 50% { opacity: 1; background-color:#1985D0 } 100% { opacity:0.3 } } </style> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> </head> <body> <div id="appLoadingIndicator"> <div></div> <div></div> <div></div> </div> </body> </html>
See the default index.html file when you generate a Sencha app. It would be much easier if you're just gonna show a static image.
Notice the <div id="appLoadingIndicator">
Code:<!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>MyApp</title> <style type="text/css"> /** * Example of an initial loading indicator. * It is recommended to keep this as minimal as possible to provide instant feedback * while other resources are still being loaded for the first time */ html, body { height: 100%; } #appLoadingIndicator { position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -50px; width: 100px; height: 20px; } #appLoadingIndicator > * { background-color: #FFFFFF; float: left; height: 20px; margin-left: 11px; width: 20px; -webkit-animation-name: appLoadingIndicator; -webkit-border-radius: 13px; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; opacity: 0.3 } #appLoadingIndicator > :nth-child(1) { -webkit-animation-delay: 0.18s; } #appLoadingIndicator > :nth-child(2) { -webkit-animation-delay: 0.42s; } #appLoadingIndicator > :nth-child(3) { -webkit-animation-delay: 0.54s; } @-webkit-keyframes appLoadingIndicator{ 0% { opacity: 0.3 } 50% { opacity: 1; background-color:#1985D0 } 100% { opacity:0.3 } } </style> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> </head> <body> <div id="appLoadingIndicator"> <div></div> <div></div> <div></div> </div> </body> </html>
Excellent. Thank you! I haven't suspected that it would that simple.
If you wish to answer on the SO thread, I will be glad to accept your answer there, too.
This is great - a real help! Thank you!
One quick question....the ref to development.js which is found in the sdk. Are you referencing that instead of the normal sencha-touch-all.js, or as well as?
Does it make any difference where in the head the script comes, or will it run effectively anywhere?
Thanks again!
Allister
Posting Permissions
Reply With Quote