jviz-loading.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import elements -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-styles/jviz-styles.html">

<!-- Loading component -->
<dom-module id="jviz-loading">
  <template>
    <style>
      /* Animation */
      @keyframes loading_anim { 0%, 80%, 100% { background-color: rgba(255, 255, 255, 0); } }

      /* Animation */
      @keyframes loading_anim { 40% { background-color: rgba(255, 255, 255, 0); } }

      /* Host style */
      :host
      {
        /* Default color */
        --jviz-loading-color: var(--jviz-blue);

        /* Default loading width */
        --jviz-loading-width: 10px;

        /* Default loading space */
        --jviz-loading-space: 15px;

        /* Loading mixin */
        --jviz-loading:
        {
          /* Dots */
          border-radius: 100px;
          width: var(--jviz-loading-width);
          height: var(--jviz-loading-width);
          background-color: var(--jviz-loading-color);

          /* Animation */
          animation: loading_anim 1.2s infinite ease-in-out;
          animation-fill-mode: both;

          /* Content */
          content: '';
        };
      }

      /* Host style */
      :host
      {
        /* Import loading mixin */
        @apply(--jviz-loading);

        /* Display */
        display: block;

        /* Text */
        text-indent: -9999em;
        font-size: 10px;

        /* Position */
        position: relative;
        transform: translateZ(0);

        /* Animation */
        animation-delay: -0.2s;

        /* Margin */
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
      }

      /* Host before */
      :host:before
      {
        /* Import loading mixin */
        @apply(--jviz-loading);

        /* Animation delay */
        animation-delay: -0.4s;

        /* Position */
        left: calc(var(--jviz-loading-space) * -1);
        position: absolute;
        top: 0;
      }

      /* Host after */
      :host:after
      {
        /* Import loading mixin */
        @apply(--jviz-loading);

        /* Position */
        position: absolute;
        left: var(--jviz-loading-space);
        top: 0;
      }

    </style>
  </template>
</dom-module>

<!-- Loading logic -->
<script>

//Loading component
var jviz_loading = { is: 'jviz-loading' };

//Properties
jviz_loading.properties = {};
jviz_loading.properties.color = { type: String, value: 'blue', reflectToAttribute: true, observer: '_update_color' };
jviz_loading.properties.width = { type: String, value: '8px', reflectToAttribute: true, observer: '_update_width' };
jviz_loading.properties.reflect = { type: Boolean, value: false, reflectToAttribute: true, observer: '_update_color' };

//Update the loading color
jviz_loading._update_color = function()
{
  //Get the color variable
  var color_variable = (this.reflect === true) ? 'var(--jviz-' + this.color + '-over)' : 'var(--jviz-' + this.color + ')';

  //Update the color
  this.customStyle['--jviz-loading-color'] = color_variable;

  //Update the styles
  this.updateStyles();
};

//Update the loading width
jviz_loading._update_width = function(value)
{
  //Get the real value
  value = parseInt(value.replace('px', '').replace('%', ''));

  //Add the width value
  this.customStyle['--jviz-loading-width'] = value + 'px';

  //Update the dots space
  this.customStyle['--jviz-loading-space'] = (value + 5) + 'px';

  //Update the styles
  this.updateStyles();
};

//Register the loading element
Polymer(jviz_loading);

</script>