csspin
Version:
CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code
241 lines (199 loc) • 6.93 kB
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><div class="cp-spinner cp-round"></div></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><div class="cp-spinner cp-pinwheel"></div></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><div class="cp-spinner cp-balls"></div></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><div class="cp-spinner cp-bubble"></div></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><div class="cp-spinner cp-flip"></div></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><div class="cp-spinner cp-hue"></div></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><div class="cp-spinner cp-skeleton"></div></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><div class="cp-spinner cp-eclipse"></div></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><div class="cp-spinner cp-boxes"></div></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><div class="cp-spinner cp-morph"></div></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><div class="cp-spinner cp-heart"></div></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><div class="cp-spinner cp-meter"></div></pre>
<!--//Syntax-->
</div>
<!--//Spinner Block-->
</div>
<!--Spinners-->
<!--Credits-->
<p class="credits">© 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>