Skip to content

Instantly share code, notes, and snippets.

@UlisesGascon
Created September 14, 2016 09:26
Show Gist options
  • Save UlisesGascon/4ec4724dcaa7b68ec50c4799e6893b69 to your computer and use it in GitHub Desktop.
Save UlisesGascon/4ec4724dcaa7b68ec50c4799e6893b69 to your computer and use it in GitHub Desktop.
[KOA DOCS] Spinner - Complex Example
{
"name": "koapp-spinner-doc-complex",
"authors": "Ulises Gascón",
"description": "Documentation complex sample spinner for King of App",
"main": "koapp-spinner-doc-complex.html",
"moduleType": [
"globals"
],
"keywords": [
"kingofapp",
"spinner"
],
"license": "MIT",
"homepage": "http://kingofapp.com",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0",
"koa-behaviors": "KingofApp/koa-behaviors#^0.11.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
{
"name": "Spinner - Complex example",
"identifier": "koapp-spinner-doc-complex",
"description": {
"en-US" : "Documentation complex sample spinner for King of App",
"es-ES" : "Ejemplo complejo de la documentación para King of App"
},
"version": "0.0.1",
"author": "Ulises Gascón",
"category": ["documentation", "demo"],
"price": 0,
"platforms": [
"android",
"ios",
"windows"
],
"showOn": {
"market": true
},
"subscription": false,
"main": "spinners/koapp-spinner-doc-complex/koapp-spinner-doc-complex.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-doc-complex">
<template strip-whitespace>
<style>
/* write your template style here */
#spinner {
width: 50;
height: 50;
padding: 30px;
}
/* end template style */
</style>
<!-- write your template here -->
<canvas id="spinner"></canvas>
<!-- end template -->
</template>
<script>
Polymer({
is: 'koapp-spinner-doc-complex',
attached: function() {
var canvas = document.getElementById('spinner');
var context = canvas.getContext('2d');
var start = new Date();
var lines = 16,
cW = context.canvas.width,
cH = context.canvas.height;
var draw = function() {
var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4, 0);
context.lineWidth = cW / 30;
context.strokeStyle = "rgba(0, 0, 0," + i / lines + ")";
context.stroke();
}
context.restore();
};
window.setInterval(draw, 1000 / 30);
},
behaviors: [
Polymer.KoaSpinnerBehavior
]
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment