Web Component Circle Loader


Circle Loader es un sencillo pero útil componente para poder presentar un icono animado de carga cuando se están ejecutando operaciones (cargar la página, realizar una llamada Ajax).

¿Por qué crear múltiples iconos para diferentes situaciones y sitios web?

Con este Cloud Web Component configurable solo necesitas incluirlo en tu código html indicando su tamaño, colores y efecto. De esta forma lo podrás adaptar fácilmente allí donde sea necesario.

Uso del componente

La url de este cloud web component es http://www.wpiece.com/p/17_40

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica no necesitas más que incluirlo.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/17_40" />
</head>

<body>
	<circle-loader></circle-loader>
</body>
</html>

Opciones de configuración




<circle-loader>
</circle-loader>



<circle-loader
	size="40px">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="wtf">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="full-circle">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="gravity">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="overshot">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="downhill">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="impetus">
</circle-loader>

<circle-loader
	size="40px"
	circle-size="0.70rem"
	circle-color="EDC951"
	loader-color="CC333F"
	type="pendulum">
</circle-loader>