Skip to content

Instantly share code, notes, and snippets.

@jairzh
Created March 17, 2014 13:48
Show Gist options
  • Save jairzh/9599467 to your computer and use it in GitHub Desktop.
Save jairzh/9599467 to your computer and use it in GitHub Desktop.
Loading Status in Salesforce1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.forceGlobalModalIndicator.hidden {
display: none;
}
.forceGlobalModalIndicator .modal-glass {
background-color: #000000;
bottom: 0;
display: block;
left: 0;
margin-left: 40px;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.forceGlobalModalIndicator .hideEl {
display: none;
}
.forceGlobalModalIndicator .indicatorContainer {
background: none repeat scroll 0 0 #354452;
border-radius: 5px;
color: #FFFFFF;
display: block;
height: 82px;
left: 0;
margin: -65px auto;
opacity: 0.9;
padding-top: 22px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 110px;
z-index: 1000;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.forceGlobalModalIndicator .indicatorContainer .icon.spinnerIcon {
-webkit-animation: spin 0.8s infinite linear;
-moz-animation: spin 0.8s infinite linear;
-o-animation: spin 0.8s infinite linear;
animation: spin 0.8s infinite linear;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2M3B4IiBoZWlnaHQ9IjYzcHgiIHZpZXdCb3g9IjAgMCA2MyA2MyI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTMxLjUwMSwxNi43ODF2LTQuODg2Yy0xMC43ODksMC0xOS41MzYsOC43NDUtMTkuNTM2LDE5LjUzNWMwLDEwLjc4OSw4Ljc0NywxOS41MzUsMTkuNTM2LDE5LjUzNWMxMC43ODgsMCwxOS41MzQtOC43NDYsMTkuNTM0LTE5LjUzNWMwLTUuMjE0LTIuMDQ5LTkuOTQ4LTUuMzc3LTEzLjQ1Mmw0LjcxOS00LjQ4M2M0LjQ0LDQuNjcxLDcuMTY4LDEwLjk4Myw3LjE2OCwxNy45MzdjMCwxNC4zODUtMTEuNjYyLDI2LjA0My0yNi4wNDIsMjYuMDQzYy0xNC4zODYsMC0yNi4wNDctMTEuNjU4LTI2LjA0Ny0yNi4wNDNjMC0xNC4zODgsMTEuNjYxLTI2LjA0NywyNi4wNDctMjYuMDQ3VjAuNWw5Ljc2Nyw4LjEzOUwzMS41MDEsMTYuNzgxeiIvPjwvc3ZnPg==") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
}
.forceGlobalModalIndicator .indicatorContainer .icon.checkIcon {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTYzLjU3NiwxOC4zMjFjMC41Mi0wLjUxOSwwLjUyLTEuNDA3LDAtMS45MjVsLTkuMzIyLTkuMzIyYy0wLjUxOC0wLjUxOC0xLjQwNi0wLjUxOC0xLjkyMywwTDIzLjk5MiwzNS40ODZsLTEyLjM1Ni0xMi40M2MtMC41MTgtMC41MTgtMS40MDYtMC41MTgtMS45MjQsMGwtOS4zMjMsOS4zMjJjLTAuNTE5LDAuNTE5LTAuNTE5LDEuNDA1LDAsMS45MjRMMjMuMDMsNTYuOTQzYzAuMjk2LDAuMjIzLDAuNTkyLDAuMzcxLDAuOTYyLDAuMzcxYzAuMzcsMCwwLjY2Ni0wLjE0OCwwLjk2Mi0wLjM3MUw2My41NzYsMTguMzIxeiIvPjwvc3ZnPg==") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
}
.forceGlobalModalIndicator .indicatorContainer .icon {
color: #FFFFFF;
height: 36px;
width: 36px;
}
.forceGlobalModalIndicator .indicatorContainer .message {
font-family: 'ProximaNovaSoft-Medium';
font-size: 15px;
margin-top: 14px;
text-align: center;
}
</style>
</head>
<body>
<div id="loadingImage" class="forceGlobalModalIndicator oneStyle oneOne" data-aura-rendered-by="950:1.1">
<div class="modal-glass" data-aura-rendered-by="951:1.1">&nbsp;</div>
<div class="indicatorContainer" role="alert" data-aura-rendered-by="953:1.1">
<img class="spinnerIcon icon uiImage" alt="" src="https://cs1.salesforce.com/auraFW/resources/aura/s.gif" data-aura-rendered-by="957:1.1" />
<div class="message" id="_gModal_Message" data-aura-rendered-by="958:1.1">Saving</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment