elements/viewer-page-indicator/viewer-page-indicator.html

<polymer-element name="viewer-page-indicator" attributes="text">
<template>
  <link rel="stylesheet" href="viewer-page-indicator.css">
  <div id="text">{{text}}</div>
  <div id="triangle-right"></div>
</template>
<script>
  Polymer('viewer-page-indicator', {
    text: '1',
    timerId: undefined,
    ready: function() {
      var scrollCallback = function() {
        var percent = window.scrollY /
            (document.body.scrollHeight -
             document.documentElement.clientHeight);
        this.style.top = percent *
            (document.documentElement.clientHeight - this.offsetHeight) + 'px';
        this.style.opacity = 1;
        clearTimeout(this.timerId);

        this.timerId = setTimeout(function() {
          this.style.opacity = 0;
          this.timerId = undefined;
        }.bind(this), 2000);
      }.bind(this);
      window.addEventListener('scroll', function() {
        requestAnimationFrame(scrollCallback);
      });

      scrollCallback();
    },
  });
</script>
</polymer-element>