Progress indicator

index.html

<div class="uploadsTab">
  <a>Uploads</a>
  <div class="porthole">
    <div class="portholeFill"></div>
  </div>
</div>

Progress indicator

Progress indicator

script.js

var uploadsTab = document.querySelector('.uploadsTab');
var porthole = document.querySelector('.porthole');
var portholeFill = document.querySelector('.portholeFill');
var percentageComplete = 0;
var portholeVisibleClass = 'uploadsTabPortholeVisible';
var rubberDuckyClass = 'portholeRubberDuckyVisible';
var rubberDuckyAnimationDuration = 8000;
var maybeShowRubberDuckyHandle = null;
var removeRubberDuckyHandle = null;

setTimeout(simulateUpload, 2000);

function simulateUpload() {
  // Start at 0%
  percentageComplete = 0;
  showPercentage();
  portholeFill.offsetTop;

  // Show the progress indicator and start making progress
  uploadsTab.classList.add(portholeVisibleClass);
  makeProgress();
  
  // Maybe show the Easter egg
  porthole.classList.remove(rubberDuckyClass);
  maybeShowRubberDucky();
  maybeShowRubberDuckyHandle = setInterval(maybeShowRubberDucky, rubberDuckyAnimationDuration);
};

function makeProgress() {
  percentageComplete += Math.random() * 5;
  showPercentage();
  
  if (percentageComplete >= 100) {
    clearInterval(maybeShowRubberDuckyHandle);
    clearTimeout(removeRubberDuckyHandle);
    uploadsTab.classList.remove(portholeVisibleClass);
    setTimeout(simulateUpload, 2000);
  } else {
    setTimeout(makeProgress, 500);
  }
}

function showPercentage() {
  var transform = 'translateY(-' + percentageComplete + '%)';
  portholeFill.style['-webkit-transform'] = transform;
  portholeFill.style['transform'] = transform;
}

function maybeShowRubberDucky() {
  // It's less likely in production!
  var chance = 0.25;

  if (Math.random() > chance) {
    return;
  }

  porthole.classList.add(rubberDuckyClass);
  removeRubberDuckyHandle = setTimeout(function() {
    porthole.classList.remove(rubberDuckyClass);
  }, rubberDuckyAnimationDuration);
}

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  background-color: #3f4652;
}

.uploadsTab {
  height: 76px;
  left: 50%;
  margin: -38px 0 0 -38px;
  position: absolute;
  top: 50%;
  width: 76px;
}

.uploadsTab > a {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 10px;
  transition: color 0.3s, transform 0.3s;
  width: 100%;
}

.uploadsTab > a:before {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDE2IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zICgxMTk3MCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxwYXRoIGQ9Ik04LjcsMC4yIEM4LjYwNDk4MDQ3LDAuMTkyNzQ5MDIzIDguNiwwLjEgOC41LDAuMSBMOC40LDQuMjc0MzU4NjRlLTE1IEM4LjIsLTAuMSA3LjksLTAuMSA3LjcsNC4yNzQzNTg2NGUtMTUgQzcuNyw0LjI3NDM1ODY0ZS0xNSA3LjYsNC4yNzQzNTg2NGUtMTUgNy42LDAuMSBDNy41LDAuMSA3LjUsMC4yIDcuNCwwLjIgTDAuNCw2LjIgQzIuOTk3NjAyMTdlLTE1LDYuNiAtMC4xLDcuMiAwLjMsNy42IEMwLjcsOCAxLjMsOC4xIDEuNyw3LjcgTDcsMy4yIEw3LDE5IEM3LDE5LjYgNy40LDIwIDgsMjAgQzguNiwyMCA5LDE5LjYgOSwxOSBMOSwzLjIgTDE0LjMsNy44IEMxNC41LDcuOSAxNC44LDggMTUsOCBDMTUuMyw4IDE1LjYsNy45IDE1LjgsNy43IEMxNi4xLDcuMiAxNi4xLDYuNiAxNS43LDYuMiBMOC43LDAuMiBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGRkZGRkYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+) center / contain no-repeat;
  content: '';
  display: block;
  margin: 0 auto 5px;
  height: 36px;
  width: 36px;
}

.uploadsTabPortholeVisible > a {
  color: transparent;
  transform: translateY(10px);
}

.porthole {
  background-color: #4e535c;
  border-radius: 50%;
  height: 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve"><circle fill="#FFFFFF" cx="50" cy="50" r="50"/></svg>');
  overflow: hidden;
  position: relative;
  transform: scale(0);
  transition: transform 0.3s;
  width: 100%;
  z-index: -1;
}

.uploadsTabPortholeVisible > .porthole {
  transform: scale(1);
}

.portholeFill {
  background-color: #00c4cc;
  bottom: -100%;
  height: 100%;
  position: absolute;
  width: 100%;
}

.uploadsTabPortholeVisible > .porthole > .portholeFill {
  transition: transform 0.3s;
}

.portholeFill:before {
  animation: moveRight 3s linear infinite;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDYgNDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ2IDQ2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPHBhdGggZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjIiIGQ9Ik00Niw0MS41YzAsMC0xMS41LTQtMjMsMHMtMjMsMC0yMywwYzAsNi42LDAsNCwwLDRoNDZWNDEuNXoiLz4KPHBhdGggZmlsbD0iIzAwQzRDQyIgZD0iTTQ2LDQyYzAsMC0xMS41LTQtMjMsMFMwLDQyLDAsNDJjMCw2LjYsMCw0LDAsNGg0NlY0MnoiLz4KPC9zdmc+Cg==) 0 100% / 75px 46px repeat-x;
  content: '';
  height: 100%;
  margin-top: 1px;
  position: absolute;
  right: 0;
  top: -100%;
  width: 500%;
}

@keyframes moveRight {
  0% {
    transform: none;
  }
  100% {
    transform: translateX(60%);
  }
}

.portholeFill:after {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NiA0NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDYgNDYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjZmFjZjU4IiBkPSJNNDEuMSwxNWMwLjEtMC40LDAuMS0wLjgsMC4xLTEuMkM0MS4yLDkuMiw0MC40LDAsMjcuNSwwQzE2LjQsMCwxNC4yLDguMywxNC4yLDEyLjlTMTguMywyMywxOC4zLDIzCglzLTMuNywxLjgtNy44LDEuOFM1LjMsMjMsMi40LDIyLjVzLTMuOCwxMy44LDAuOCwxOC45UzEzLjcsNDYsMjIuOSw0NnMyMi45LDAsMjIuOS05LjJTMzYuNywyMywzNi43LDIzczAuOS0wLjksMS45LTIuMwoJYzAuMSwwLDAuMywwLDAuNCwwYzQuMSwwLDEwLjEtNS4xLDUtNS4xQzQzLDE1LjYsNDIsMTUuNCw0MS4xLDE1TDQxLjEsMTV6IE0zMi42LDEzLjhjMS4zLDAsMi4zLTEsMi4zLTIuM3MtMS0yLjMtMi4zLTIuMwoJcy0yLjMsMS0yLjMsMi4zUzMxLjMsMTMuOCwzMi42LDEzLjh6Ii8+CjxjaXJjbGUgZmlsbD0iIzAwMDAwMCIgY3g9IjMzLjQiIGN5PSIxMiIgcj0iMiIvPgo8L3N2Zz4K) 0 0 / contain no-repeat;
  content: '';
  display: none;
  height: 20px;
  left: -20px;
  position: absolute;
  top: -10px;
  width: 20px;
}

.portholeRubberDuckyVisible > .portholeFill:after {
  animation: rubberDuckyFloating 8s linear infinite;
  display: block;
}

@keyframes rubberDuckyFloating {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -5px);
  }
  60% {
    transform: translate(20px, 0);
  }
  70% {
    transform: translate(36px, -3px);
  }
  80% {
    transform: translate(56px, 0);
  }
  90% {
    transform: translate(76px, -3px);
  }
  100% {
    transform: translate(96px, 0);
  }
}