1
0

splashscreen.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Splash Screen</title>
  7. <style>
  8. body {
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. height: 100vh;
  13. margin: 0;
  14. overflow: hidden;
  15. }
  16. .splash-container {
  17. position: relative;
  18. width: 200px;
  19. height: 200px;
  20. }
  21. .splash-logo {
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. width: 100%;
  26. height: 100%;
  27. background-image: url('logo.png');
  28. background-size: contain;
  29. background-repeat: no-repeat;
  30. border-radius: 50%;
  31. }
  32. .loading-indicator {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. width: 100%;
  37. height: 100%;
  38. border-radius: 50%;
  39. animation: spin 1s linear infinite;
  40. border: 4px solid transparent;
  41. border-top-color: #ff00dd;
  42. }
  43. @keyframes spin {
  44. 0% { transform: rotate(0deg); border-top-color: #ff00dd; }
  45. 25% { border-top-color: #e91e63; }
  46. 50% { border-top-color: #140f08; }
  47. 75% { border-top-color: #ffeb3b; }
  48. 100% { transform: rotate(360deg); border-top-color: #ff00dd; }
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="splash-container">
  54. <div class="splash-logo"></div>
  55. <div class="loading-indicator"></div>
  56. </div>
  57. </body>
  58. </html>