AMI - Lesson 08

Progress bar. author(s): Nicolas Rannou (github)

HTML

<div id="container"></div>


<script type="text/javascript" src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/dataarts/dat.gui/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mrdoob/stats.js/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

<!-- AMI -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js/0.0.22/ami.min.js"></script>##

<!-- google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-39303022-3', 'auto');
var page = '/ami/lessons/08';
ga('send', 'pageview', page);

</script>

CSS

body{
  font-family: source-code-pro, sans-serif;
  color:#F9F9F9;
  background-color: #212121
}

#container {
  background-color: #000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.container.progress {
  font-size: 2.4em;
  text-align: center;
  width: 200px;
  height: 8px;
  position: absolute;
  background-color: rgba(158, 158, 158, 0.5);
  z-index: 1;
  border: 1px solid;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.progress.load{

  box-sizing: border-box;
  border: 3px solid;
  width: 0%;
  transform: translateZ(0); 

}

.progress.parse{

  display: none;
  transform: translateZ(0); 

}

.beat {

  color: #E91E63;
  -webkit-animation: love .5s infinite linear alternate-reverse;
  -moz-animation: love .5s infinite linear alternate-reverse;
  animation: love .5s infinite linear alternate-reverse;

}

@keyframes love {

  animation-name: love;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-fill-mode: initial;
  animation-play-state: initial;
  0% {
    transform: scale(1.3);
    }
  100% {
    transform: scale(1.7);
  }

}

JavaScript

/* globals AMI*/

var CustomProgressBar = function(container) {
    this._container = container;
    this._modes = {
        load: {
            name: 'load',
            color: '#FF0000'
        },
        parse: {
            name: 'parse',
            color: '#00FF00'
        }
    };
    this._requestAnimationFrameID = null;
    this._mode = null;
    this._value = null;
    this._total = null;

    this.init = function() {
        var container = document.createElement('div');
        container.classList.add('progress');
        container.classList.add('container');
        container.innerHTML =
            '<div class="progress load"></div><div class="progress parse">Parsing data <div class="beat">♥</div></div>';
        this._container.appendChild(container);
        // start rendering loop
        this.updateUI();
    }.bind(this);

    this.update = function(value, total, mode) {
        this._mode = mode;
        this._value = value;
        // depending on CDN, total return to XHTTPRequest can be 0.
        // In this case, we generate a random number to animate the progressbar
        if (total === 0) {
            this._total = value;
            this._value = Math.random() * value;
        } else {
            this._total = total;
        }
    }.bind(this);

    this.updateUI = function() {
        var self = this;
        this._requestAnimationFrameID = requestAnimationFrame(self.updateUI);

        if (
            !(
                this._modes.hasOwnProperty(this._mode) &&
                this._modes[this._mode].hasOwnProperty('name') &&
                this._modes[this._mode].hasOwnProperty('color')
            )
        ) {
            return false;
        }

        var progress = Math.round(this._value / this._total * 100);
        var color = this._modes[this._mode].color;

        var progressBar = this._container.getElementsByClassName('progress ' + this._modes[this._mode].name);
        if (progressBar.length > 0) {
           ...