/
index.html
129 lines (125 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html data-ng-app="SpinnersApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MK Spinners/Loaders - New Spinners! New look! Only CSS! by Masoom Ulhaq S!</title>
<meta name="robots" content="index, nofollow">
<meta name="author" content="Masoom Ulhaq S">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Less than 10kb!!! A new collection of amazing, light weight & pure CSS spinners with easy code usage.">
<meta name="keywords" content="mk spinners new light weight less than 10kb spinner loader pure css sass minimal masoomulhaq masoom ulhaq shaik ui ux latest collection material ui design">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,900' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="./dist/css/build.css" />
</head>
<body data-ng-controller="MainCtrl">
<div class="container">
<div class="header text-center">
<h1 class="header-title">MK Spinners</h1>
<p class="header-caption">A collection of pure CSS spinners</p>
</div>
<div class="row">
<div class="col-md-7">
<div class="title-section">
<h4>How we look</h4>
</div>
<div class="row">
<div class="col-md-6" data-ng-repeat="spinner in spinners.results">
<div data-ng-include="'./app/partials/spinner-box.html'"></div>
</div>
</div>
</div>
<div class="col-md-5">
<article>
<section>
<div class="title-section">
<h4>Easy if you know</h4>
</div>
<p>On click of:</p>
<ul class="list-info">
<li>
<i class="fa fa-html5"></i> Copies <abbr title="Hyper Text Markup Language">HTML</abbr> code
</li>
<li>
<i class="fa fa-css3"></i> Downloads <abbr title="Cascading Style Sheets">CSS</abbr> file
</li>
</ul>
<p>for the respective spinner.</p>
</section>
<section>
<div class="title-section">
<h4>Download spinner CSS</h4>
</div>
<ul>
<li><a download target="_blank" href="./dist/css/mk-spinners.css"><i class="fa fa-download"></i>mk-spinners.css</a></li>
<li><a download target="_blank" href="./dist/css/mk-spinners.min.css"><i class="fa fa-download"></i>mk-spinners.min.css</a></li>
</ul>
<p>Link this CSS to your HTML file.</p>
</section>
<section>
<div class="title-section">
<h4 class="text-uppercase">HTML USAGE</h4>
</div>
<p>Syntax</p>
<div data-ng-include="'./app/partials/pre-html-syntax.html'"></div>
<!-- <pre class="prettyprint linenums:1"><div class="{class-name}"></div></pre> -->
<p>Example</p>
<div data-ng-include="'./app/partials/pre-html-example.html'" data-ng-init="example = spinners.results[0]"></div>
<!-- <pre class="prettyprint linenums:1"><div class="mk-spinner-wrap">
<div class="mk-spinner-ring"></div></div></pre> -->
</section>
<section>
<div class="title-section">
<h4>Suggestions?</h4>
</div>
<p>Thank you for visiting my page. Please let me know if you have any suggestions regarding <strong>mk spinners</strong> <a href="mailto:masoomulhaqs@gmail.com?subject=SUGGESTION REGARDING MK SPINNERS">here</a>.</p>
</section>
<section>
<div class="title-section">
<h4>Developer's Bio</h4>
</div>
<p><strong>Masoom Ulhaq S</strong>, UX Engineer & Frontend Developer. <a href="http://masoomulhaqs.github.io/#/gallery" target="_blank">checkout my work</a></p>
<ul class="list-inline">
<li>
<a target="_blank" href="https://twitter.com/smasoomulhaq">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a target="_blank" href="https://plus.google.com/u/0/113179001864450969005">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a target="_blank" href="http://codepen.io/masoomulhaqs/">
<i class="fa fa-codepen"></i>
</a>
</li>
<li>
<a ng-href="https://github.com/masoomulhaqs" target="_blank" href="https://github.com/masoomulhaqs">
<i class="fa fa-github"></i>
</a>
</li>
<li>
<a target="_blank" href="https://in.linkedin.com/in/masoomulhaqs">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</section>
</article>
</div>
</div>
</div>
<a class="button-fork" href="https://github.com/masoomulhaqs/mk-spinners" target="_blank"><img src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85001069-4', 'auto');
ga('send', 'pageview');
</script>
<script src="./dist/js/build.js"></script>
</body>
</html>