Вот что я получил с первого взгляда:
jQuery меняет родительский класс (цвет) .progress, который является родителем .inner, который является родителем .water, основываясь на значении, которое вы указали в процентном поле (поле ввода). Таким образом .water может иметь свои индивидуальные стили, но вы можете изменить цвет в зависимости от родительского класса. Так, например, .water с родителем (или прародителем) .green будет иметь зеленый фон.
Значение свойства "top" - это самая высокая точка в жидкости, насколько близко или далеко она находится от вершины. Это просто отправная точка. Похоже, jQuery изменяет фактические значения. Например, если окружность имеет высоту 400px, а дочерний элемент расположен абсолютно сверху: 50%, верх дочернего элемента будет расположен на 200px ниже верха родительского элемента. Это отлично подходит для масштабируемости. Если вы хотите, чтобы размер окружности на мобильном устройстве составлял 200 пикселей, просто измените размер родителей и относительную шкалу соответственно.
Это обманчиво по ряду причин. Прежде всего, они не оформлены в порядке. Во-вторых, с удобочитаемой точки зрения кажется, что было бы более целесообразно использовать нижнюю, а не верхнюю и переключать значения красного и зеленого. В зависимости от того, как они разработали остальную часть этого и как функционирует jQuery, это может нарушить дизайн. Наконец, цвета не меняются в одинаковых процентах. Цвета меняются в 33-34 и 66-67. Похоже, что верхняя часть жидкости находится около 25% от вершины в 67 и 75% от вершины в 34.