spin.js plugin o libreria

si esa! pero no se como adaptarla a mi sitio web! que quiera ponerla donde yo desee, de paso todo esta en ingles!
no se en que parte va esto:
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target);

victor · Answer 3 · 2016-02-17T23:21:59+0000

Te he creado un ejemplo que te enseña a crear un Spinner mediante un botón y a pararlo con otro. La idea es que lo utilices cuando cargues datos (en AJAX) o algo parecido...

Espero que te sirva y oriente algo más.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo del Spinner</title>

</head>
<body>


<button id="iniciar">Iniciar</button>
<button id="parar">Parar</button>
<div id="spiner"></div>

<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script>
var opts = {
  lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}

var spinner;

document.getElementById("iniciar").addEventListener("click",function(){
    var target = document.getElementById('spiner')
    spinner = new Spinner(opts).spin(target);
});

document.getElementById("parar").addEventListener("click",function(){
    spinner.spin(false);
});

</script>

</body>
</html>

spin.js plugin o libreria

Por favor, accede o regístrate para responder a esta pregunta.

3 Respuestas

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Preguntas relacionadas

Categorías