Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exemplary template to change the loading template to replace the default loading bars that users will see when the WordPress + Office 365 plugin redirects them to Microsoft (see https://docs.wpo365.com/article/114-customize-the-loading-template for details)
<style>
.lds-grid{display:inline-block;position:relative;width:80px;height:80px}.lds-grid div{position:absolute;width:16px;height:16px;border-radius:50%;background:#000;animation:lds-grid 1.2s linear infinite}.lds-grid div:nth-child(1){top:8px;left:8px;animation-delay:0s}.lds-grid div:nth-child(2){top:8px;left:32px;animation-delay:-.4s}.lds-grid div:nth-child(3){top:8px;left:56px;animation-delay:-.8s}.lds-grid div:nth-child(4){top:32px;left:8px;animation-delay:-.4s}.lds-grid div:nth-child(5){top:32px;left:32px;animation-delay:-.8s}.lds-grid div:nth-child(6){top:32px;left:56px;animation-delay:-1.2s}.lds-grid div:nth-child(7){top:56px;left:8px;animation-delay:-.8s}.lds-grid div:nth-child(8){top:56px;left:32px;animation-delay:-1.2s}.lds-grid div:nth-child(9){top:56px;left:56px;animation-delay:-1.6s}@keyframes lds-grid{0%,100%{opacity:1}50%{opacity:.5}}
.centered{height: 80px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>
<div class="lds-grid centered"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment