autosave.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <div id="snippet-autosave">
  2. <p>Test me!</p>
  3. </div>
  4. <div class="snippet-autosave-header">
  5. <div class="snippet-autosave-status">
  6. <div class="snippet-autosave-status_label">Status:</div>
  7. <div class="snippet-autosave-status_spinner">
  8. <span class="snippet-autosave-status_spinner-label"></span>
  9. <span class="snippet-autosave-status_spinner-loader"></span>
  10. </div>
  11. </div>
  12. <div class="snippet-autosave-server">
  13. <div class="snippet-autosave-server_label">HTTP server lag (ms):</div>
  14. <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
  15. </div>
  16. </div>
  17. <p>Server data:</p>
  18. <pre>
  19. <code id="snippet-autosave-console"></code>
  20. </pre>
  21. <style>
  22. .snippet-autosave-header {
  23. display: flex;
  24. justify-content: space-between;
  25. align-items: center;
  26. background: var(--ck-color-toolbar-background);
  27. border: 1px solid var(--ck-color-toolbar-border);
  28. padding: 10px;
  29. border-radius: var(--ck-border-radius);
  30. margin-top: -1.5em;
  31. margin-bottom: 1.5em;
  32. border-top: 0;
  33. border-top-left-radius: 0;
  34. border-top-right-radius: 0;
  35. }
  36. .snippet-autosave-status_spinner{
  37. display: flex;
  38. align-items: center;
  39. position: relative;
  40. }
  41. .snippet-autosave-status_spinner-label {
  42. position: relative;
  43. }
  44. .snippet-autosave-status_spinner-label::after {
  45. content: 'Saved!';
  46. color: green;
  47. display: inline-block;
  48. margin-right: var(--ck-spacing-medium);
  49. }
  50. /* During "Saving" display spinner and change content of label. */
  51. .snippet-autosave-status.busy .snippet-autosave-status_spinner-label::after {
  52. content: 'Saving...';
  53. color: red;
  54. }
  55. .snippet-autosave-status.busy .snippet-autosave-status_spinner-loader {
  56. display: block;
  57. width: 16px;
  58. height: 16px;
  59. border-radius: 50%;
  60. border-top: 3px solid hsl(0, 0%, 70%);
  61. border-right: 2px solid transparent;
  62. animation: autosave-status-spinner 1s linear infinite;
  63. }
  64. .snippet-autosave-status,
  65. .snippet-autosave-server {
  66. display: flex;
  67. align-items: center;
  68. }
  69. .snippet-autosave-server_label,
  70. .snippet-autosave-status_label {
  71. font-weight: bold;
  72. margin-right: var(--ck-spacing-medium);
  73. }
  74. #snippet-autosave-lag {
  75. padding: 4px;
  76. }
  77. #snippet-autosave-console {
  78. /* Lets wrap content. */
  79. max-height: 300px;
  80. overflow: auto;
  81. white-space: normal;
  82. background: #2b2c26;
  83. transition: 300ms;
  84. }
  85. #snippet-autosave-console.received {
  86. animation: autosave-received 1s ease 1;
  87. }
  88. @keyframes autosave-status-spinner {
  89. to { transform: rotate( 360deg ); }
  90. }
  91. @keyframes autosave-received {
  92. from { background: green; }
  93. to { background: #2b2c26; }
  94. }
  95. </style>