8
0

word-count-update.html 848 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <style>
  2. .customized-count__color-box {
  3. --hue: 56;
  4. width: 20px;
  5. height: 20px;
  6. background-color: hsl( var( --hue ), 100%, 50% );
  7. display: inline-block;
  8. vertical-align: middle;
  9. border-radius: 100%;
  10. }
  11. .customized-count > div {
  12. margin-left: 1em;
  13. }
  14. .customized-count span {
  15. min-width: 90px;
  16. display: inline-block;
  17. }
  18. </style>
  19. <div id="demo-editor-update">
  20. <p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”.</p>
  21. </div>
  22. <div class="word-count customized-count">
  23. <div class="customized-count__words">
  24. <label>
  25. <span>Words:</span>
  26. <progress value="12" max="20"></progress>
  27. </label>
  28. </div>
  29. <div class="customized-count__characters">
  30. <span>Characters:</span>
  31. <div class="customized-count__color-box"></div>
  32. </div>
  33. </div>