loadingScreen.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <style>
  2. /* Loading Screen element */
  3. loading-screen {
  4. position: absolute;
  5. left: 0;
  6. z-index: 100;
  7. opacity: 1;
  8. pointer-events: none;
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. -webkit-transition: opacity 1s ease;
  13. -moz-transition: opacity 1s ease;
  14. transition: opacity 1s ease;
  15. }
  16. img.loading-image {
  17. -webkit-animation: spin 0.75s linear infinite;
  18. animation: spin 0.75s linear infinite;
  19. }
  20. @-webkit-keyframes spin {
  21. 0% {
  22. -webkit-transform: rotate(0deg);
  23. }
  24. 100% {
  25. -webkit-transform: rotate(360deg);
  26. }
  27. }
  28. @keyframes spin {
  29. 0% {
  30. transform: rotate(0deg);
  31. }
  32. 100% {
  33. transform: rotate(360deg);
  34. }
  35. }
  36. </style>
  37. <img class="loading-image" style="position:absolute" src="{{loadingImage}}">
  38. <img class="static-loading-image" style="position:absolute" src="{{staticLoadingImage}}">