Componente de botón Ladda en JavaScript-botón Kaomos

Tiempo de ejecución: 30 minutos. Empezar

Autor: zSacrety
Views Total: 74
Sitio oficial: Ir a la web
Actualizado: April 9, 2019
Licencia: MIT

Vista prévia

Componente de botón Ladda en JavaScript-botón Kaomos

Descripción

El botón Kaomos es un componente web puro de JavaScript Ladda Button que muestra un indicador de carga en línea dentro del botón de acción cuando se activa una determinada acción.

Ideal para el botón Enviar que convierte el texto enviar en un Spinner de carga al enviar el formulario o capturar algo de un origen de datos externo.

Puede encontrar más Ladda plugins de botón en nuestro sitio web plugin de jQuery.

Funcionamiento

Instale & descargar.

# NPM
$ npm install kaomos-button --save

Importe el componente de botón Kaomos.

<script src="dist/button.min.js"></script>
// or as an ES module
import 'dist/button.min.js'

Cree el botón Kaomos con los siguientes atributos:

  • Label: etiqueta de botón
  • Loader-Speed: velocidad de animación
  • Loader-Size: tamaño en píxeles
  • Loader-color: color
  • Loader-width: ancho de trazo
<kaomos-button

 label='Your Label'

 loader-speed='2.5'

 loader-size='60'

loader-color='#fff'

 loader-width='4'>
</kaomos-button>
// or via JavaScript
const btn = document.createElement('kaomos-button')
btn.setAttribute(attribute, value)
document.body.appendChild(btn)

API methods.

// Gets the instance
const btn = document.getElementsByTagName('kaomos-button');

// Starts the loading animation
btn.start();

// Stops the loading animation
btn.stop();

// Toggles the loading animation
btn.toggle();

// Checks if the loading animation is running
btn.isRunning();

// Updates the internal variables
btn.update();

Te puede interesar: