index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
  8. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  9. <link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>apple-touch-icon-precomposed.png">
  10. <title>
  11. <%= htmlWebpackPlugin.options.title %>
  12. </title>
  13. <style>
  14. @keyframes app-load {
  15. 0% {
  16. opacity: 1;
  17. }
  18. 100% {
  19. opacity: 0;
  20. }
  21. }
  22. .app-load {
  23. display: flex;
  24. justify-content: center;
  25. align-items: center;
  26. gap: 5px;
  27. height: 100vh;
  28. }
  29. .app-load span {
  30. display: inline-block;
  31. width: 8px;
  32. height: 8px;
  33. border-radius: 50%;
  34. background: #ccc;
  35. opacity: 0;
  36. animation: app-load 600ms ease infinite;
  37. }
  38. .app-load span:nth-child(1) {
  39. animation-delay: 100ms;
  40. }
  41. .app-load span:nth-child(2) {
  42. animation-delay: 200ms;
  43. }
  44. .app-load span:nth-child(3) {
  45. animation-delay: 300ms;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <noscript>
  51. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
  52. Please enable it to continue.</strong>
  53. </noscript>
  54. <div id="app" class="app">
  55. <div class="app-load">
  56. <span></span>
  57. <span></span>
  58. <span></span>
  59. </div>
  60. </div>
  61. <!-- built files will be auto injected -->
  62. </body>
  63. </html>