loading-dots.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /*!
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. @keyframes loadingDotBlink {
  20. 0% {
  21. opacity: 0.2;
  22. }
  23. 40% {
  24. opacity: 1;
  25. }
  26. 100% {
  27. opacity: 0.2;
  28. }
  29. }
  30. .loading-dots {
  31. display: inline-block;
  32. }
  33. .loading-dot {
  34. display: inline-block;
  35. margin-left: 0.5rem;
  36. border-radius: 50%;
  37. width: 10px;
  38. height: 10px;
  39. background-color: currentColor;
  40. animation: loadingDotBlink 1.2s infinite;
  41. animation-fill-mode: both;
  42. will-change: opacity;
  43. }
  44. .loading-dot:first-child {
  45. margin-left: 0;
  46. }
  47. .loading-dot:nth-child(2) {
  48. animation-delay: 0.2s;
  49. }
  50. .loading-dot:nth-child(3) {
  51. animation-delay: 0.4s;
  52. }