You are here

spinner.css in Open Social 8.4

.spinner {
  margin: 1em auto 1em;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

File

themes/socialbase/assets/css/spinner.css
View source
  1. .spinner {
  2. margin: 1em auto 1em;
  3. width: 70px;
  4. text-align: center;
  5. }
  6. .spinner > div {
  7. width: 10px;
  8. height: 10px;
  9. background-color: black;
  10. border-radius: 100%;
  11. display: inline-block;
  12. -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  13. animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  14. }
  15. .spinner .bounce1 {
  16. -webkit-animation-delay: -0.32s;
  17. animation-delay: -0.32s;
  18. }
  19. .spinner .bounce2 {
  20. -webkit-animation-delay: -0.16s;
  21. animation-delay: -0.16s;
  22. }
  23. @-webkit-keyframes sk-bouncedelay {
  24. 0%, 80%, 100% {
  25. -webkit-transform: scale(0);
  26. }
  27. 40% {
  28. -webkit-transform: scale(1);
  29. }
  30. }
  31. @keyframes sk-bouncedelay {
  32. 0%, 80%, 100% {
  33. -webkit-transform: scale(0);
  34. transform: scale(0);
  35. }
  36. 40% {
  37. -webkit-transform: scale(1);
  38. transform: scale(1);
  39. }
  40. }