Spinners (Loaders)

Los spinners se construyen con Polymer, como un elemento más.

Empezamos – Crear Spinners.

Una manera fácil y sencilla para crear spinners es utilizar nuestra herramienta de línea de comandos.

Una vez tenemos la herramienta de línea de comandos instalada globalmente podremos crear spinners desde cualquier lugar de nuestro sistema, aunque lo recomendado es hacerlo desde la carpeta donde esta alojado el Visualizer.

Estructura

Se trabaja como un elemento de Polymer y requiere de su propia carpeta con sus diversos archivos de configuración.

koapp-spinner-template
├── .bowerrc
├── bower.json
├── config.json
└── koapp-spinner-template.html

Incluyendo el Spinner en nuestra App

Los spinners también están registrados dentro de nuestro archivo structure.json. Debemos indicar ruta e identificador… estos dos parámetros determinarán y definirán la relación entre muchos elementos. Es importante utilizar nombres que tengan sentido y respeten la misma filosofía que la declaración de variables (minúsculas, sin acentos, etc…)

{
  //...
  "config": {
    //...
    "spinner": {
      "identifier": "koapp-spinner-template",
      "path": "spinners/koapp-spinner-rotationplane/koapp-spinner-template.html"
    },
    //...
  }
  //...
}

Configurando el Spinner

El propio spinner tiene un archivo de configuración que determinará ciertos aspectos técnicos y también nos aportará todos los metadatos necesarios (autor, precio, versión, descripciones, etc…) para poder ubicar correctamente tu spinner en nuestro market una vez haya sido validado y publicado.

• config.json básico

{
  "name": "Spinner Template",
  "identifier": "koapp-spinner-template",
  "description": {
    "en-US" : "",
    "es-ES" : ""
  },
  "version": "1.0.0",
  "author": "King of App",
  "category": [],
  "price": 0,
  "showOn": {
    "market": true
  },
  "main": "spinners/koapp-spinner-template/koapp-spinner-template.html"
}

• Explicación

Dependencias del spinner

• .bowerrc. Es muy importante posicionar la ruta correcta, esta es la configuración recomendada.

{
  "directory" : "../../bower_components"
}

• bower.json. Esta es la configuración recomendada (polymer, koa-behaviors y devDependencies incluidos), pero puedes ampliarla si lo necesitas.

{
  ...
  "dependencies": {
    "polymer": "Polymer/polymer#^1.2.0",
    "koa-behaviors": "KingofApp/koa-behaviors#^0.11.0"
  },
  "devDependencies": {
    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  }
}

Estructura interna del spinner

• koapp-spinner-template.html

  <link rel="import" href="../../bower_components/polymer/polymer.html">
  <link rel="import" href="../../bower_components/koa-behaviors/koa-spinner-behavior.html">
  <dom-module id="koapp-spinner-template">
  <template strip-whitespace>
  <style>
    /* CSS del spinner */
  
    /* fin CSS */
  </style>
  <!-- HTML del spinner -->
  <!-- fin HTML -->
  </template>
  <script>
  Polymer({
    is: 'koapp-spinner-template',
    behaviors: [
      Polymer.KoaSpinnerBehavior
    ]
  });
  </script>
  </dom-module>

Combinaciones de colores

Al igual que en los temas, podremos utilizar algunas variables clave para hacer que nuestro spinner se adapte automáticamente a los colores que los usuarios quieran.

• Colores disponibles

• Ejemplo:

  .spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: var(--accent-color);
  }

• Más información
  • Polymer – Styling local DOM
  • Using CSS variables

Visualización del Spinner

En ocasiones necesitamos poder ver el spinner en funcionamiento de manera ininterrumpida, existen diversos métodos para lograrlo.

La opción más recomendada es crearte un módulo que incluya en el index.html y controller.js la siguiente configuración.

• index.html

  <div class='transitionloader'></div>

• controller.js

  structureService.launchSpinner('.transitionloader');

También puedes descargarlo desde aquí (Spinner Visualizer v0.1).

Pero si solo vas a diseñar un spinner o no quieres emplear tiempo en crearte un entorno de trabajo puedes optar por modificar el módulo html que se instala por defecto junto al Visualizer

Ejemplos

Sencillo

Para este ejemplo utilizaremos como base el spinner de W3Schools. Este spinner es muy sencillo y solamente tendremos que preocuparnos de incluir el HTML y el CSS en nuestra App.

Avanzado

Utilizaremos como base este spinner que funciona utilizando canvas. Este spinner utiliza JavaScript como base junto con HTML y css. Deberemos incluirlo todo para asegurarnos que funcione correctamente.