You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
1.9 KiB

4 weeks ago
  1. <style>
  2. #nuxt-loading {
  3. visibility: hidden;
  4. opacity: 0;
  5. position: absolute;
  6. left: 0;
  7. right: 0;
  8. top: 0;
  9. bottom: 0;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. flex-direction: column;
  14. animation: nuxtLoadingIn 10s ease;
  15. -webkit-animation: nuxtLoadingIn 10s ease;
  16. animation-fill-mode: forwards;
  17. overflow: hidden;
  18. }
  19. @keyframes nuxtLoadingIn {
  20. 0% {
  21. visibility: hidden;
  22. opacity: 0;
  23. }
  24. 20% {
  25. visibility: visible;
  26. opacity: 0;
  27. }
  28. 100% {
  29. visibility: visible;
  30. opacity: 1;
  31. }
  32. }
  33. @-webkit-keyframes nuxtLoadingIn {
  34. 0% {
  35. visibility: hidden;
  36. opacity: 0;
  37. }
  38. 20% {
  39. visibility: visible;
  40. opacity: 0;
  41. }
  42. 100% {
  43. visibility: visible;
  44. opacity: 1;
  45. }
  46. }
  47. #nuxt-loading>div,
  48. #nuxt-loading>div:after {
  49. border-radius: 50%;
  50. width: 5rem;
  51. height: 5rem;
  52. }
  53. #nuxt-loading>div {
  54. font-size: 10px;
  55. position: relative;
  56. text-indent: -9999em;
  57. border: .5rem solid #F5F5F5;
  58. border-left: .5rem solid #3B8070;
  59. -webkit-transform: translateZ(0);
  60. -ms-transform: translateZ(0);
  61. transform: translateZ(0);
  62. -webkit-animation: nuxtLoading 1.1s infinite linear;
  63. animation: nuxtLoading 1.1s infinite linear;
  64. }
  65. #nuxt-loading.error>div {
  66. border-left: .5rem solid #ff4500;
  67. animation-duration: 5s;
  68. }
  69. @-webkit-keyframes nuxtLoading {
  70. 0% {
  71. -webkit-transform: rotate(0deg);
  72. transform: rotate(0deg);
  73. }
  74. 100% {
  75. -webkit-transform: rotate(360deg);
  76. transform: rotate(360deg);
  77. }
  78. }
  79. @keyframes nuxtLoading {
  80. 0% {
  81. -webkit-transform: rotate(0deg);
  82. transform: rotate(0deg);
  83. }
  84. 100% {
  85. -webkit-transform: rotate(360deg);
  86. transform: rotate(360deg);
  87. }
  88. }
  89. </style>
  90. <script>
  91. window.addEventListener('error', function () {
  92. var e = document.getElementById('nuxt-loading');
  93. if (e) {
  94. e.className += ' error';
  95. }
  96. });
  97. </script>
  98. <div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div>
  99. <!-- https://projects.lukehaas.me/css-loaders -->