pulse.html 937 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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. border-radius: 100%;
  17. -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  18. animation: sk-scaleout 1.0s infinite ease-in-out;
  19. }
  20. @-webkit-keyframes sk-scaleout {
  21. 0% { -webkit-transform: scale(0) }
  22. 100% {
  23. -webkit-transform: scale(1.0);
  24. opacity: 0;
  25. }
  26. }
  27. @keyframes sk-scaleout {
  28. 0% {
  29. -webkit-transform: scale(0);
  30. transform: scale(0);
  31. } 100% {
  32. -webkit-transform: scale(1.0);
  33. transform: scale(1.0);
  34. opacity: 0;
  35. }
  36. }
  37. </style>
  38. <div class="spinner">
  39. <div class="double-bounce1"></div>
  40. <div class="double-bounce2"></div>
  41. </div>
  42. <%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>