rotating-plane.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <style>
  2. body, html, #<%= globals.id %> {
  3. background: <%= options.background %>;
  4. width: 100%;
  5. height: 100%;
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. margin: 0;
  10. padding: 0;
  11. }
  12. .spinner {
  13. width: 40px;
  14. height: 40px;
  15. background-color: <%= options.color %>;
  16. -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  17. animation: sk-rotateplane 1.2s infinite ease-in-out;
  18. }
  19. @-webkit-keyframes sk-rotateplane {
  20. 0% { -webkit-transform: perspective(120px) }
  21. 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  22. 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
  23. }
  24. @keyframes sk-rotateplane {
  25. 0% {
  26. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  27. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  28. } 50% {
  29. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  30. -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  31. } 100% {
  32. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  33. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  34. }
  35. }
  36. </style>
  37. <div class="spinner"></div>
  38. <%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>