数据可视化大屏
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
2.2KB

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>云派</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. <style type="text/css">
  10. .preloader {
  11. position: fixed;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. overflow: hidden;
  17. background: #49a9ee;
  18. z-index: 9999;
  19. transition: opacity .65s
  20. }
  21. .preloader-hidden-add {
  22. opacity: 1;
  23. display: block
  24. }
  25. .preloader-hidden-add-active {
  26. opacity: 0
  27. }
  28. .preloader-hidden {
  29. display: none
  30. }
  31. .cs-loader {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. height: 100%;
  36. width: 100%
  37. }
  38. .cs-loader-inner {
  39. transform: translateY(-50%);
  40. top: 50%;
  41. position: absolute;
  42. width: 100%;
  43. color: #fff;
  44. text-align: center
  45. }
  46. .cs-loader-inner label {
  47. font-size: 20px;
  48. opacity: 0;
  49. display: inline-block
  50. }
  51. @keyframes lol {
  52. 0% {
  53. opacity: 0;
  54. transform: translateX(-300px)
  55. }
  56. 33% {
  57. opacity: 1;
  58. transform: translateX(0)
  59. }
  60. 66% {
  61. opacity: 1;
  62. transform: translateX(0)
  63. }
  64. 100% {
  65. opacity: 0;
  66. transform: translateX(300px)
  67. }
  68. }
  69. .cs-loader-inner label:nth-child(6) {
  70. animation: lol 3s infinite ease-in-out
  71. }
  72. .cs-loader-inner label:nth-child(5) {
  73. animation: lol 3s .1s infinite ease-in-out
  74. }
  75. .cs-loader-inner label:nth-child(4) {
  76. animation: lol 3s .2s infinite ease-in-out
  77. }
  78. .cs-loader-inner label:nth-child(3) {
  79. animation: lol 3s .3s infinite ease-in-out
  80. }
  81. .cs-loader-inner label:nth-child(2) {
  82. animation: lol 3s .4s infinite ease-in-out
  83. }
  84. .cs-loader-inner label:nth-child(1) {
  85. animation: lol 3s .5s infinite ease-in-out
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <app-root></app-root>
  91. <div class="preloader">
  92. <div class="cs-loader">
  93. <div class="cs-loader-inner"><label> ●</label><label> ●</label><label> ●</label><label> ●</label><label>
  94. ●</label><label> ●</label></div>
  95. </div>
  96. </div>
  97. </body>
  98. </html>