index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSPIN - CSS Spinners and Loaders</title>
	<link href="csspin.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="CSSPIN - CSS Spinners and Loaders">
	<meta name="twitter:description" content="CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code">
	<meta name="twitter:image:src" content="http://webkul.com/blog/wp-content/uploads/2016/11/csspin-poster.png">
	<meta name="twitter:creator" content="@webkul">
	<meta name="twitter:url" content="https://webkul.github.io/csspin/">
	<meta property="og:title" content="CSSPIN - CSS Spinners and Loaders">
	<meta property="og:description" content="CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code">
	<meta property="og:url" content="https://webkul.github.io/csspin/">
	<meta property="og:image" content="http://webkul.com/blog/wp-content/uploads/2016/11/csspin-poster.png">
</head>
<body>
	<!--CSSPin Wrapper-->
	<div class="cp-wrapper">

		<!--Header-->
		<h1>CSS<span>PIN</span></h1>
		<p>CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code</p>
		<a href="https://github.com/webkul/csspin" target="_blank">View on Github</a>
		<a href="http://bit.ly/csspin-tweet" target=_blank>Tweet</a>
		<!--//Header-->

		<!--Spinners-->
		<div class="cp-spinners">

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Round Element-->
					<div class="cp-spinner cp-round"></div>
				<!--//Spinner Round Element-->

				<!--Caption-->
					<span>Spinner Round</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-round"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Pinwheel Element-->
					<div class="cp-spinner cp-pinwheel"></div>
				<!--//Spinner Pinwheel Element-->

				<!--Caption-->
					<span>Spinner Pinwheel</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-pinwheel"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Balls Element-->
					<div class="cp-spinner cp-balls"></div>
				<!--//Spinner Balls Element-->

				<!--Caption-->
					<span>Spinner Balls</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-balls"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Bubble Element-->
					<div class="cp-spinner cp-bubble"></div>
				<!--//Spinner Bubble Element-->

				<!--Caption-->
					<span>Spinner Bubble</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-bubble"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Flip Element-->
					<div class="cp-spinner cp-flip"></div>
				<!--//Spinner Flip Element-->

				<!--Caption-->
					<span>Spinner Flip</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-flip"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Hue Element-->
					<div class="cp-spinner cp-hue"></div>
				<!--//Spinner Hue Element-->

				<!--Caption-->
					<span>Spinner Hue</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-hue"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Skeleton Element-->
					<div class="cp-spinner cp-skeleton"></div>
				<!--//Spinner Skeleton Element-->

				<!--Caption-->
					<span>Spinner Skeleton</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-skeleton"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Eclipse Element-->
					<div class="cp-spinner cp-eclipse"></div>
				<!--//Spinner Eclipse Element-->

				<!--Caption-->
					<span>Spinner Eclipse</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-eclipse"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Boxes Element-->
					<div class="cp-spinner cp-boxes"></div>
				<!--//Spinner Boxes Element-->

				<!--Caption-->
					<span>Spinner Boxes</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-boxes"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Morph Element-->
					<div class="cp-spinner cp-morph"></div>
				<!--//Spinner Morph Element-->

				<!--Caption-->
					<span>Spinner Morph</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-morph"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Heart Element-->
					<div class="cp-spinner cp-heart"></div>
				<!--//Spinner Heart Element-->

				<!--Caption-->
					<span>Spinner Heart</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-heart"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

			<!--Spinner Block-->
			<div class="cp-spinner-block">	
				<!--Spinner Meter Element-->
					<div class="cp-spinner cp-meter"></div>
				<!--//Spinner Meter Element-->

				<!--Caption-->
					<span>Spinner Meter</span>
				<!--//Caption-->

				<!--Syntax-->
					<pre>&lt;div class="cp-spinner cp-meter"&gt;&lt;/div&gt</pre>
				<!--//Syntax-->
			</div>
			<!--//Spinner Block-->

		</div>
		<!--Spinners-->

		<!--Credits-->
		<p class="credits">&copy; Crafted with
		<svg class="animated-svg active" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">  
        <path fill="#F26183" d="M7.023,2.142A3.854,3.854,0,0,0,3.763-.005C1.3-.005,0,2.094,0,4.194c0,3.486,7.023,7.811,7.023,7.811s6.982-4.284,6.982-7.811c0-2.142-1.338-4.2-3.721-4.2A3.634,3.634,0,0,0,7.023,2.142Z"></path>
        </svg> at <a href="https://design.webkul.com/" target="_blank">Webkul UXlab</a></p>
        <!--//Credits-->

	</div>
	<!--//CSSPin Wrapper-->
</body>
</html>