mystyle.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. button {color: red;}
  2. p {margin-left: 20px;}
  3. .spinner {
  4. margin: 100px auto 0;
  5. width: 150px;
  6. text-align: center;
  7. height:300px;
  8. left:20%;
  9. z-index:21;
  10. }
  11. .spinner > div {
  12. width: 30px;
  13. height: 30px;
  14. background-color: #67CF22;
  15. border-radius: 100%;
  16. display: inline-block;
  17. -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  18. animation: bouncedelay 1.4s infinite ease-in-out;
  19. /* Prevent first frame from flickering when animation starts */
  20. -webkit-animation-fill-mode: both;
  21. animation-fill-mode: both;
  22. }
  23. .spinner .bounce1 {
  24. -webkit-animation-delay: -0.32s;
  25. animation-delay: -0.32s;
  26. }
  27. .spinner .bounce2 {
  28. -webkit-animation-delay: -0.16s;
  29. animation-delay: -0.16s;
  30. }
  31. @-webkit-keyframes bouncedelay {
  32. 0%, 80%, 100% { -webkit-transform: scale(0.0) }
  33. 40% { -webkit-transform: scale(1.0) }
  34. }
  35. @keyframes bouncedelay {
  36. 0%, 80%, 100% {
  37. transform: scale(0.0);
  38. -webkit-transform: scale(0.0);
  39. } 40% {
  40. transform: scale(1.0);
  41. -webkit-transform: scale(1.0);
  42. }
  43. }
  44. #waiting{
  45. position: absolute;
  46. display:none;
  47. width:400px;
  48. height:300px;
  49. left:20%;
  50. top:15%;
  51. z-index:20;
  52. }