index.html 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="ico" href="/favicon.ico"><title>baozhidao-putoutstorage</title><style>* {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .loadingSpinn {
  6. height: 100vh;
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. }
  11. .atom-spinner,
  12. .atom-spinner * {
  13. box-sizing: border-box;
  14. }
  15. .atom-spinner {
  16. height:100px;
  17. width: 100px;
  18. overflow: hidden;
  19. }
  20. .atom-spinner .spinner-inner {
  21. position: relative;
  22. display: block;
  23. height: 100%;
  24. width: 100%;
  25. }
  26. .atom-spinner .spinner-circle {
  27. display: block;
  28. position: absolute;
  29. color: #409eff;
  30. font-size: calc(60px * 0.24);
  31. top: 50%;
  32. left: 50%;
  33. transform: translate(-50%, -50%);
  34. }
  35. .atom-spinner .spinner-line {
  36. position: absolute;
  37. width: 100%;
  38. height: 100%;
  39. border-radius: 50%;
  40. animation-duration: 1s;
  41. border-left-width: calc(60px / 25);
  42. border-top-width: calc(60px / 25);
  43. border-left-color: #409eff;
  44. border-left-style: solid;
  45. border-top-style: solid;
  46. border-top-color: transparent;
  47. }
  48. .atom-spinner .spinner-line:nth-child(1) {
  49. animation: atom-spinner-animation-1 1s linear infinite;
  50. transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
  51. }
  52. .atom-spinner .spinner-line:nth-child(2) {
  53. animation: atom-spinner-animation-2 1s linear infinite;
  54. transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
  55. }
  56. .atom-spinner .spinner-line:nth-child(3) {
  57. animation: atom-spinner-animation-3 1s linear infinite;
  58. transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
  59. }
  60. @keyframes atom-spinner-animation-1 {
  61. 100% {
  62. transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
  63. }
  64. }
  65. @keyframes atom-spinner-animation-2 {
  66. 100% {
  67. transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
  68. }
  69. }
  70. @keyframes atom-spinner-animation-3 {
  71. 100% {
  72. transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
  73. }
  74. }</style><script defer="defer" src="/js/chunk-vendors.eac145c3.js"></script><script defer="defer" src="/js/app.50e44388.js"></script><link href="/css/chunk-vendors.c5343724.css" rel="stylesheet"><link href="/css/app.72159cba.css" rel="stylesheet"><!--[if IE]><link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg"><![endif]--><link rel="icon" type="image/png" sizes="32x32" href="/./favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/./favicon.ico"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="baozhidao-putoutstorage"><link rel="apple-touch-icon" href="/./favicon.ico"><link rel="mask-icon" href="/./favicon.ico" color="#4DBA87"><meta name="msapplication-TileImage" content="/./favicon.ico"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but baozhidao-putoutstorage doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"><div class="loadingSpinn"><div class="atom-spinner"><div class="spinner-inner"><div class="spinner-line"></div><div class="spinner-line"></div><div class="spinner-line"></div><div class="spinner-circle">&#9679;</div></div></div></div></div></body></html>