loading.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!doctype html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset='UTF-8' />
  5. <meta content='width=device-width, initial-scale=1.0' name='viewport' />
  6. <title>Connect-Slicer integration</title>
  7. </head>
  8. <body>
  9. <!-- This page is not served anywhere, only to be copy 'n' pasted into Slicer as a fallback loading screen. -->
  10. <div id='loading-screen' style='width: 100%; height: 100%'>
  11. <div style='position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center'>
  12. <p>
  13. <svg style='width: 80px'
  14. viewBox='-250 -250 500 500' xmlns='http://www.w3.org/2000/svg'>
  15. <style type='text/css'>
  16. .filament {
  17. stroke: #FA6831;
  18. }
  19. .spool {
  20. stroke: #231F20;
  21. fill: none;
  22. }
  23. .filament line {
  24. stroke-linecap: round;
  25. }
  26. </style>
  27. <defs>
  28. <pattern class='spool' height='100' id='hexagon' patternTransform='scale(0.875)' patternUnits='userSpaceOnUse'
  29. viewBox='-0.866025 -1.5 1.73205 3'
  30. width='57.735'
  31. >
  32. <polygon fill='none' points='0,1 0.866025,0.5 0.866025,-0.5 0,-1 -0.866025,-0.5 -0.866025,0.5'
  33. stroke-width='0.34' />
  34. <line stroke-width='0.34' x1='0' x2='0' y1='1' y2='1.5'></line>
  35. <line stroke-width='0.34' x1='0' x2='0' y1='-1' y2='-1.5'></line>
  36. </pattern>
  37. </defs>
  38. <g class='filament'>
  39. <circle fill='none' r='145' stroke-width='130'>
  40. <animate attributeName='r' dur='6s' repeatCount='indefinite' values='145;80;145' />
  41. <animate attributeName='stroke-width' dur='6s' repeatCount='indefinite' values='130;0;130' />
  42. </circle>
  43. <line stroke-width='12' x1='204' x2='204' y1='0' y2='245'>
  44. <animate attributeName='x1' dur='6s' repeatCount='indefinite' values='204;74;204' />
  45. <animate attributeName='x2' dur='6s' repeatCount='indefinite' values='204;74;204' />
  46. </line>
  47. </g>
  48. <g class='spool'>
  49. <circle fill='none' r='157' stroke='url(#hexagon)' stroke-width='171' />
  50. <circle r='244' stroke-width='12' />
  51. <circle r='71' stroke-width='18' />
  52. <animateTransform
  53. attributeName='transform' begin='0s'
  54. dur='6s'
  55. fill='freeze'
  56. repeatCount='indefinite'
  57. type='rotate'
  58. values='0;540;0'
  59. />
  60. </g>
  61. </svg>
  62. </p>
  63. </div>
  64. </div>
  65. </body>
  66. </html>