lds-ripple.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .lds-ripple {
  2. display: block;
  3. width: 100%;
  4. height: 100%;
  5. }
  6. .lds-ripple div {
  7. position: absolute;
  8. border-radius: 100%;
  9. animation: lds-ripple 2s cubic-bezier(0, 1, 1, 1) infinite;
  10. }
  11. .lds-ripple div:nth-child(2) {
  12. animation-delay: -0.4s;
  13. }
  14. .lds-ripple div:nth-child(3) {
  15. animation-delay: -0.8s;
  16. }
  17. .lds-ripple div:nth-child(4) {
  18. display: none;
  19. }
  20. .lds-ripple div:nth-child(5) {
  21. display: none;
  22. }
  23. .lds-ripple div:nth-child(6) {
  24. display: none;
  25. }
  26. .lds-ripple div:nth-child(7) {
  27. display: none;
  28. }
  29. .lds-ripple div:nth-child(8) {
  30. display: none;
  31. }
  32. .lds-ripple div:nth-child(9) {
  33. display: none;
  34. }
  35. .lds-ripple div:nth-child(10) {
  36. display: none;
  37. }
  38. .lds-ripple div:nth-child(11) {
  39. display: none;
  40. }
  41. .lds-ripple div:nth-child(12) {
  42. display: none;
  43. }
  44. @keyframes lds-ripple {
  45. 0% {
  46. top: -10vh;
  47. left: 10vw;
  48. width: 100vw;
  49. height: 100vh;
  50. opacity: 0.3;
  51. border: 1px solid #7bff00;
  52. }
  53. 100% {
  54. top: 50%;
  55. left: 50%;
  56. width: 0;
  57. height: 0;
  58. opacity: 0.9;
  59. border: 4px solid #004142;
  60. }
  61. }