loading.tpl 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. % setdefault("start", False)
  2. % setdefault("end", False)
  3. % setdefault("progress", dict())
  4. % setdefault("done", False)
  5. % if start:
  6. <html>
  7. <head>
  8. <title>{{title}}</title>
  9. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  10. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
  11. <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
  12. <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
  13. <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
  14. <style>
  15. html {
  16. --scrollbarBG: #333333;
  17. --thumbBG: #080808;
  18. }
  19. svg {
  20. max-height: min(100vh, calc(100vw * 9 / 16));
  21. max-width: calc(100vw - 2em);
  22. }
  23. body {
  24. background-color: #080808;
  25. color: #cccccc;
  26. text-align: center;
  27. }
  28. .loader-container {
  29. position: absolute;
  30. left: 45vw;
  31. top: 45vh;
  32. }
  33. .loader-container:has(+ .done) {
  34. display: none;
  35. }
  36. div.progress {
  37. display:grid;
  38. grid-template-columns: max-content max-content;
  39. grid-gap:5px;
  40. }
  41. div.progress label {
  42. text-align:left;
  43. }
  44. div.progress label:after {
  45. content: "...";
  46. }
  47. div.progress:has(+ .done) {
  48. display: none;
  49. }
  50. div.progress:has(+ .done) label:after {
  51. content: "";
  52. }
  53. </style>
  54. </head>
  55. <body align="center">
  56. <div class="loader-container">
  57. % end
  58. % include('progress', **progress, done=done)
  59. % if end:
  60. </div>
  61. <div class="done"/>