-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (151 loc) · 7.02 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>A small collection of preloaders</title>
<meta name="description" content="A small collection of preloaders">
<meta name="author" content="Rohan Shewale">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- input::before exist in chrome! -->
<input type="checkbox" name="grid_switch" value="" id="grid_switch">
<main>
<div class="holder d-table y100p red">
<div class="d-table-cell text-center">
<img src="preloaders/bubbles.svg" alt="bubblesbubbles">
</div>
</div>
<div class="holder d-table y100p orange">
<div class="d-table-cell text-center">
<img src="preloaders/spinning-bubbles.svg" alt="bubblesspinning-bubbles">
</div>
</div>
<div class="holder d-table y100p indego">
<div class="d-table-cell text-center">
<img src="preloaders/spokes.svg" alt="bubblesspokes.svg">
</div>
</div>
<div class="holder d-table y100p pink">
<div class="d-table-cell text-center">
<img src="preloaders/audio.svg" alt="audio">
</div>
</div>
<div class="holder d-table y100p purple">
<div class="d-table-cell text-center">
<img src="preloaders/ball-triangle.svg" alt="ball-triangle">
</div>
</div>
<div class="holder d-table y100p deep-purple">
<div class="d-table-cell text-center">
<img src="preloaders/bar-waves-alt.svg" alt="bar-waves-alt">
</div>
</div>
<div class="holder d-table y100p light-blue">
<div class="d-table-cell text-center">
<img src="preloaders/bubbles-alt.svg" alt="bubbles-alt">
</div>
</div>
<div class="holder d-table y100p blue">
<div class="d-table-cell text-center">
<img src="preloaders/bar-waves.svg" alt="bar-waves">
</div>
</div>
<div class="holder d-table y100p light-blue">
<div class="d-table-cell text-center">
<img src="preloaders/bubbles-alt-fade.svg" alt="bubbles-alt-fade">
</div>
</div>
<div class="holder d-table y100p cyan">
<div class="d-table-cell text-center">
<img src="preloaders/circle-tail-spin.svg" alt="circle-tail-spin">
</div>
</div>
<div class="holder d-table y100p teal">
<div class="d-table-cell text-center">
<img src="preloaders/circles.svg" alt="circles">
</div>
</div>
<div class="holder d-table y100p black">
<div class="d-table-cell text-center">
<img src="preloaders/cylon-red.svg" class="x60pi" alt="cylon-red" >
</div>
</div>
<div class="holder d-table y100p light-green">
<div class="d-table-cell text-center">
<img src="preloaders/grid.svg" alt="grid">
</div>
</div>
<div class="holder d-table y100p lime">
<div class="d-table-cell text-center">
<img src="preloaders/rings-alt.svg" alt="rings-alt">
</div>
</div>
<div class="holder d-table y100p yellow-mute">
<div class="d-table-cell text-center">
<img src="preloaders/rings.svg" alt="rings">
</div>
</div>
<div class="holder d-table y100p amber">
<div class="d-table-cell text-center">
<img src="preloaders/simple-circle-thin.svg" alt="simple-circle-thin">
</div>
</div>
<div class="holder d-table y100p deep-orange">
<div class="d-table-cell text-center">
<img src="preloaders/simple-circle.svg" alt="simple-circle">
</div>
</div>
<div class="holder d-table y100p brown">
<div class="d-table-cell text-center">
<img src="preloaders/spinning-bubbles.svg" alt="spinning-bubbles">
</div>
</div>
<div class="holder d-table y100p grey">
<div class="d-table-cell text-center">
<img src="preloaders/spinning-circles.svg" alt="spinning-circles">
</div>
</div>
<div class="holder d-table y100p crimson-light">
<div class="d-table-cell text-center">
<img src="preloaders/clock.svg" alt="clock">
</div>
</div>
<div class="holder d-table y100p red-accent-2">
<div class="d-table-cell text-center">
<img src="preloaders/planet-rotate.svg" alt="planet-rotate">
</div>
</div>
<div class="holder d-table y100p purple-accent-2">
<div class="d-table-cell text-center">
<img src="preloaders/bar-rotate.svg" alt="bar-rotate">
</div>
</div>
</main>
<nav class="p-fixed">
<div class="nav-icon hide-on-chrome" id="switch_grid" title="Toggle Grid">
<img src="assets/grid_layout.svg" class="x100p" alt="nav_up">
</div>
<div class="nav-icon arrow-up" id="arrow-up" title="Next">
<img src="assets/chevron-up.svg" class="x100p" alt="nav_up">
</div>
<div class="nav-icon arrow-down" id="arrow-down" title="Previous">
<img src="assets/chevron-down.svg" class="x100p" alt="nav_down">
</div>
</nav>
<a class="tweet btn textView" href="//twitter.com/intent/tweet?text=A+small+collection+of+preloaders+by+%40rohanOnly%26url%3Dhttps%3A%2F%2Fron4stoppable.github.io%2Fpreloaders%2F" target="_blank">
<svg width="17px" height="13px" viewBox="0 0 30 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M29.9412896,2.83945075 C28.8553433,3.32117015 27.6882269,3.64678209 26.4632955,3.79300299 C27.7133731,3.04355821 28.6737313,1.85688358 29.125791,0.442746269 C27.9556657,1.1367403 26.6597373,1.64066866 25.2803463,1.91219104 C24.1757731,0.735259701 22.6019463,0 20.860191,0 C16.9514149,0 14.078006,3.64771343 14.9614209,7.43641791 C9.92858507,7.18395224 5.46644776,4.77299104 2.47977313,1.10944478 C0.893480597,3.83061493 1.65696716,7.39242985 4.35678806,9.1942209 C3.36426269,9.16284179 2.43026866,8.89038806 1.61398209,8.4366806 C1.54828657,11.2450388 3.55547463,13.8671284 6.47129552,14.4509373 C5.61904478,14.6828418 4.68555224,14.7359284 3.73672836,14.554603 C4.50716418,16.9617672 6.74568358,18.7098269 9.39642985,18.7599761 C6.84426269,20.7554149 3.63442388,21.6437731 0.424871642,21.2666507 C3.10470448,22.9860537 6.28517015,23.9890388 9.70964776,23.987391 C20.9525373,23.987391 27.3045134,14.4912 26.9216597,5.97413731 C28.1028896,5.12317612 29.1317373,4.05571343 29.9412896,2.83945075 L29.9412896,2.83945075 Z"></path>
</svg>
<span class="textView">Share This</span>
</a>
<footer>
<div class="credits textView">
<small>Made with <span title="love">♥<span> by <a href="//rohanShewale.me" target="_blank" title="Rohan S. Shewale"> Rohan S. Shewale</a></small>
</div>
</footer>
<script src="master.js" charset="utf-8"></script>
</body>
</html>