loadingScreen.html 935 B

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