autosave.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <div class="snippet-autosave-header">
  2. <div class="snippet-autosave-status">
  3. <div class="snippet-autosave-status_label">Status:</div>
  4. <div class="snippet-autosave-status_spinner">
  5. <span class="snippet-autosave-status_spinner-label"></span>
  6. <span class="snippet-autosave-status_spinner-loader"></span>
  7. </div>
  8. </div>
  9. <div class="snippet-autosave-server">
  10. <div class="snippet-autosave-server_label">HTTP server lag (ms):</div>
  11. <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
  12. </div>
  13. </div>
  14. <div id="snippet-autosave">
  15. <p>Test me!</p>
  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. }
  32. .snippet-autosave-status_spinner{
  33. display: flex;
  34. align-items: center;
  35. position: relative;
  36. }
  37. .snippet-autosave-status_spinner-label {
  38. position: relative;
  39. }
  40. .snippet-autosave-status_spinner-label::after {
  41. content: 'Saved!';
  42. color: green;
  43. display: inline-block;
  44. margin-right: var(--ck-spacing-large);
  45. }
  46. /* During "Saving" display spinner and change content of label. */
  47. .snippet-autosave-status.busy .snippet-autosave-status_spinner-label::after {
  48. content: 'Saving...';
  49. color: red;
  50. }
  51. .snippet-autosave-status.busy .snippet-autosave-status_spinner-loader {
  52. display: block;
  53. width: 16px;
  54. height: 16px;
  55. border-radius: 50%;
  56. border-top: 3px solid hsl(0, 0%, 70%);
  57. border-right: 2px solid transparent;
  58. animation: autosave-status-spinner 1s linear infinite;
  59. }
  60. .snippet-autosave-status,
  61. .snippet-autosave-server {
  62. display: flex;
  63. align-items: center;
  64. }
  65. .snippet-autosave-server_label,
  66. .snippet-autosave-status_label {
  67. font-weight: bold;
  68. margin-right: var(--ck-spacing-large);
  69. }
  70. #snippet-autosave-lag {
  71. padding: 4px;
  72. }
  73. #snippet-autosave-console {
  74. /* Lets wrap content. */
  75. max-height: 300px;
  76. overflow: auto;
  77. white-space: normal;
  78. }
  79. @keyframes autosave-status-spinner {
  80. to { transform: rotate( 360deg ); }
  81. }
  82. </style>