chasing-dots.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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. position: relative;
  16. text-align: center;
  17. -webkit-animation: sk-rotate 2.0s infinite linear;
  18. animation: sk-rotate 2.0s infinite linear;
  19. }
  20. .dot1, .dot2 {
  21. width: 60%;
  22. height: 60%;
  23. display: inline-block;
  24. position: absolute;
  25. top: 0;
  26. background-color: <%= options.color %>;
  27. border-radius: 100%;
  28. -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  29. animation: sk-bounce 2.0s infinite ease-in-out;
  30. }
  31. .dot2 {
  32. top: auto;
  33. bottom: 0;
  34. -webkit-animation-delay: -1.0s;
  35. animation-delay: -1.0s;
  36. }
  37. @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
  38. @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
  39. @-webkit-keyframes sk-bounce {
  40. 0%, 100% { -webkit-transform: scale(0.0) }
  41. 50% { -webkit-transform: scale(1.0) }
  42. }
  43. @keyframes sk-bounce {
  44. 0%, 100% {
  45. transform: scale(0.0);
  46. -webkit-transform: scale(0.0);
  47. } 50% {
  48. transform: scale(1.0);
  49. -webkit-transform: scale(1.0);
  50. }
  51. }
  52. </style>
  53. <div class="spinner">
  54. <div class="dot1"></div>
  55. <div class="dot2"></div>
  56. </div>
  57. <%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>