three-bounce.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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: 70px;
  14. text-align: center;
  15. }
  16. .spinner > div {
  17. width: 18px;
  18. height: 18px;
  19. background-color: <%= options.color %>;
  20. border-radius: 100%;
  21. display: inline-block;
  22. -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  23. animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  24. }
  25. .spinner .bounce1 {
  26. -webkit-animation-delay: -0.32s;
  27. animation-delay: -0.32s;
  28. }
  29. .spinner .bounce2 {
  30. -webkit-animation-delay: -0.16s;
  31. animation-delay: -0.16s;
  32. }
  33. @-webkit-keyframes sk-bouncedelay {
  34. 0%, 80%, 100% { -webkit-transform: scale(0) }
  35. 40% { -webkit-transform: scale(1.0) }
  36. }
  37. @keyframes sk-bouncedelay {
  38. 0%, 80%, 100% {
  39. -webkit-transform: scale(0);
  40. transform: scale(0);
  41. } 40% {
  42. -webkit-transform: scale(1.0);
  43. transform: scale(1.0);
  44. }
  45. }
  46. </style>
  47. <div class="spinner">
  48. <div class="bounce1"></div>
  49. <div class="bounce2"></div>
  50. <div class="bounce3"></div>
  51. </div>
  52. <%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>