Water Tracker

index.pug

svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', x="0px", y="0px", style="display: none;")
  symbol#wave
    path(d='M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7\c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z')
    path(d='M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7\C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z')
    path(d='M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7\c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z')
    path(d='M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7\C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z')

.page#page
  
  .tracker
    .tracker__inner#tracker
      .tracker__item 12:08
      .tracker__item 15:10
      .tracker__item.tracker__item_active 16:58

  .percent
    .percent__inner
      .percent__num#count 50
      .percent__sign %
  button.button#button
    | Drink
  .water#water
    svg.water__wave.water__wave_back(viewBox="0 0 560 20")
      use(xlink:href="#wave")
    svg.water__wave.water__wave_front(viewBox="0 0 560 20")
      use(xlink:href="#wave")
    .water__inner
      .bubble.bubble_1
      .bubble.bubble_2
      .bubble.bubble_3

script.js

var btn = document.getElementById('button'),
    tracker = document.getElementById('tracker'),
    trackerOffset = 0,
    page = document.getElementById('page'),
    water = document.getElementById('water'),
    cnt = document.getElementById('count'),
    percent = cnt.innerHTML,
    random, diff, interval, isInProgress;

btn.addEventListener('click', update);

function update() {

  if (isInProgress) return;
  btn.removeEventListener('click', update);
  isInProgress = true;
  
  page.classList.add('page_animated');
  setTimeout(function(){
    page.classList.remove('page_animated');
  }, 1000);
  
  rotateTracker();
  
  random = parseInt(Math.random() * 100);
  
  diff = percent - random;
  random = Math.abs(random);

  interval = setInterval(function(){
    
    if (diff === 0 || percent === random) { 
      btn.addEventListener('click', update);
      clearInterval(interval);
      isInProgress = false;
      return;
    }
    
    if (diff < 0) {
      percent++;
    } else {
      percent--;
    }
    
    cnt.innerHTML = percent;
    water.style.transform = 'translate(0, ' + (100 - percent) + '%)';
    water.querySelector('.water__inner').style.height = percent + '%';

    isInProgress = false;
  }, 16);  
}

function getTime() {
  var time = new Date(Math.random() * 1000000000000),
      hours = time.getHours(),
      minutes = time.getMinutes();
  
  if (hours < 10) hours = '0' + hours
  if (minutes < 10) minutes = '0' + minutes
  
  time = hours + ':' + minutes;
  
  return time;
}

function rotateTracker() {
  var time = getTime(),
      firstElem = tracker.firstElementChild,
      computedStyle = getComputedStyle(firstElem),
      step = computedStyle.height,
      node = document.createElement('div');
  
  node.className = 'tracker__item tracker__item_active';
  node.innerHTML = time;
  
  tracker.querySelector('.tracker__item_active').className = 'tracker__item';

  trackerOffset = trackerOffset - parseInt(step);
  console.log(trackerOffset);
  
  tracker.style.transform = 'translate( 0, ' + trackerOffset + 'px)';
    
  tracker.appendChild(node);
}

style.postcss

@use postcss-simple-vars;
@use postcss-nested;

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

body {
  background: #f0f6fc;
  font: 14px/1 'Open Sans', helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  height: 480px;
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e384c;
  border-radius: 6px;
  overflow: hidden;
  &_animated {
    .button {
      &:before {
        animation: button-shadow .25s;
      }
    }
    .bubble {
      &_1 {
        animation: bubble-1 .75s linear -.3s;
      }
      &_2 {
        animation: bubble-2 .75s linear;
      }
      &_3 {
        animation: bubble-3 .75s linear;
      }
    }
  }
}

.button {
  z-index: 15;
  position: absolute;
  width: 50%;
  bottom: 8%;
  left: 25%;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2rem;
  padding: .7rem 0;
  background: none;
  font-weight: 600;
  cursor: pointer;
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    border: inherit;
    border-radius: inherit;
  }
}

.percent {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: lighter;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  &__inner {
    display: inline-block;
  }
  &__num {
    display: inline-block;
    font-size: 6rem;
  }
  &__sign {
    display: inline-block;
    font-size: 4rem;
  }
}

.water {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
  bottom: 0;
  left: 0;
  background: #32bafa;
  transform: translate(0, 50%);
  &__inner {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  
  &__wave {
    width: 200%;
    position: absolute;
    bottom: 100%;
    &_back {
      right: 0;
      fill: #2c7fbe;
      animation: wave-back 1.4s infinite linear;
    }
    &_front {
      left: 0;
      fill: #32bafa;
      margin-bottom: -1px;
      animation: wave-front .7s infinite linear;
    }
  }
}

.bubble {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fff;
  border-radius: 50%;
  transform: scale(0) translate(0, 0);
  opacity: 0;
  &_2 {
    margin-left: -20px;
  }
}

@keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}

@keyframes button-shadow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes bubble-1 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(20px, -25px);
  }
  50% {
    transform: scale(.5) translate(40px, -50px);
  }
  75% {
    transform: scale(.75) translate(20px, -75px);
  }
  100% {
    transform: scale(1) translate(10px, -100px);
  }
}

.tracker {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  height: 74px;
  overflow: hidden;
  z-index: 20;
  &__inner {
    transition: transform .2s ease-in-out;
  }
  &__item {
    transition: opacity .2s ease-in-out;
    font-size: 1.1rem;
    padding-bottom: 10px;
    opacity: .7;
    &_active {
      opacity: 1;
    }
  }
}

@keyframes bubble-2 {
  0% {
    opacity: 1;
    transform: scale(0) translate(-20px, -10px);
  }
  25% {
    transform: scale(.25) translate(-40px, -45px);
  }
  50% {
    transform: scale(.5) translate(-60px, -70px);
  }
  75% {
    transform: scale(.75) translate(-40px, -95px);
  }
  100% {
    transform: scale(1) translate(-30px, -100px);
  }
}

@keyframes bubble-3 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(0, -20px);
  }
  50% {
    transform: scale(.5) translate(-10px, -40px);
  }
  75% {
    transform: scale(.75) translate(10px, -60px);
  }
  100% {
    transform: scale(1) translate(0, -100px);
  }
}

water-tracker.markdown

Water Tracker

Implementation of the concept: https://dribbble.com/shots/2396543-Water-Tracker

A Pen by Mikita on CodePen.

License.