HTML template of the busy dialog for used to create a SharePoint 2013 Hosted App (SPH) Single Page App (SPA).

SharePoint 2013 SPA UX Template - Working On It

<div id="lpm-workingOnIt-container"
     class="dissolve-animation">
  <div id="lpm-workingOnIt-message">
    <img src="data:image/gif;base64,R0lGODlhGAAYAJECAP///5mZmf///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAGAAYAAACQJQvAGgRDI1SyLnI5jr2YUQx10eW5hmeB6Wpkja5SZy6tYzn+g5uMhuzwW6lFtF05CkhxGQm+HKuoDPplOlDFAAAIfkEBQoAAgAsFAAGAAQABAAAAgVUYqeXUgAh+QQFCgACACwUAA4ABAAEAAACBVRip5dSACH5BAUKAAIALA4AFAAEAAQAAAIFVGKnl1IAIfkEBQoAAgAsBgAUAAQABAAAAgVUYqeXUgAh+QQFCgACACwAAA4ABAAEAAACBVRip5dSACH5BAUKAAIALAAABgAEAAQAAAIFVGKnl1IAIfkECQoAAgAsBgAAAAQABAAAAgVUYqeXUgAh+QQJCgACACwAAAAAGAAYAAACJZQvEWgADI1SyLnI5jr2YUQx10eW5omm6sq27gvH8kzX9o3ndAEAIfkECQoAAgAsAAAAABgAGAAAAkCULxFoAAyNUsi5yOY69mFEMddHluYZntyjqY3Vul2yucJo5/rOQ6lLiak0QtSEpvv1lh8l0lQsYqJHaO3gFBQAACH5BAkKAAIALAAAAAAYABgAAAJAlC8RaAAMjVLIucjmOvZhRDHXR5bmGZ7co6mN1bpdsrnCaOf6zkOpzJrYOjHV7Gf09JYlJA0lPBQ/0ym1JsUeCgAh+QQJCgACACwAAAAAGAAYAAACQJQvEWgADI1SyLnI5jr2YUQx10eW5hme3KOpjdW6XbK5wmjn+s5Dqcya2Dox1exn9PSWJeRNSSo+cR/pzOSkHgoAIfkECQoAAgAsAAAAABgAGAAAAkCULxFoAAyNUsi5yOY69mFEMddHluYZntyjqY3Vul2yucJo5/rOQ6nMmtg6MdXsZ/T0liXc6jRbOTHR15SqfEIKACH5BAkKAAIALAAAAAAYABgAAAJAlC8RaAAMjVLIucjmOvZhRDHXR5bmGZ7co6mN1bpdsrnCaOf6zkO4/JgBOz/TrHhC9pYRpNJnqURLwtdT5JFGCgAh+QQJCgACACwAAAAAGAAYAAACPpQvEWgADI1SyLnI5jr2YUQx10eW5jme3NOpTWe5Qpu6tYzn+l558tWywW4lmk/IS6KOr2UtSILOYiYiUVAAADs=">
    <span class="ms-accentText lpm-workingOnIt-accentText">
      &nbsp;Working on it...
    </span>
  </div>
</div>

<style>
/*#region 'Working on it' busy dialog" */
#lpm-workingOnIt-container {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  background: #ccc /* fallback for old browsers */;
  background: rgba(204, 204, 204, .5);
}

#lpm-workingOnIt-message {
  text-align: center;
  top: 50%;
  left: 50%;
  width: 25em;
  height: 5em;
  margin: -2em auto 0 -10em /* top is half of height and left is half of width*/;
  position: absolute;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.6);
  padding: 8px 0px 0px 0px;
}

.lpm-workingOnIt-accentText {
  font-size: 36px;
  font-family: "Segoe UI Light", "Segoe UI", Tahoma, Helvetica, Arial,sans-serif;
}
/*#endregion */
</style>