Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Circle Loader

Web Component Circle Loader


Circle Loader is a simple but useful component to be able to present an animated load icon when executing operations (load the page, make an Ajax call).

Why create multiple icons for different situations and websites?

With this configurable Cloud Web Component you only need to include it in your html code setting its size, colors and effect. Then you can easily adapt it where needed.

Component use

The url of this cloud web component is http://www.wpiece.com/p/17_40

As always, you must include the polyfill for web components before the component it is imported.

To use it with basic configuration you only need to include it.

<!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>

Setting options




<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>