1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <style>
- body, html, #<%= globals.id %> {
- background: <%= options.background %>;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
- padding: 0;
- }
- .spinner {
- width: 40px;
- height: 40px;
- background-color: <%= options.color %>;
- -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
- animation: sk-rotateplane 1.2s infinite ease-in-out;
- }
- @-webkit-keyframes sk-rotateplane {
- 0% { -webkit-transform: perspective(120px) }
- 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
- 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
- }
- @keyframes sk-rotateplane {
- 0% {
- transform: perspective(120px) rotateX(0deg) rotateY(0deg);
- -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
- } 50% {
- transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
- -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
- } 100% {
- transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
- -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
- }
- }
- </style>
- <div class="spinner"></div>
- <%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|