Skip to content

Instantly share code, notes, and snippets.

@rattanchauhan rattanchauhan/app.js
Last active Nov 10, 2016

Embed
What would you like to do?
Adding a loading spinner at app startup in Sencha Architect
if(Ext.fly('initialLoader')){
Ext.fly('initialLoader').destroy();
}
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Application name</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Application name</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<div id="initialLoader" class="loader"></div>
</body>
</html>
/* Application Loading Spinner */
.loader {
margin: 60px auto;
margin-top: 25%;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0,128,255, 0.2);
border-right: 1.1em solid rgba(0,128,255, 0.2);
border-bottom: 1.1em solid rgba(0,128,255, 0.2);
border-left: 1.1em solid #0080ff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.