/
index.html
executable file
·142 lines (141 loc) · 5.88 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Button Styles</title>
<meta name="description" content="Progress Button Styles: Creative effects for loading buttons" />
<meta name="keywords" content="progress button, loading button, 3d, loading indicator, progress indicator" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/TexturedText/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=17809"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>Progress Button Styles <span>Creative effects for loading buttons</span></h1>
<p class="note">Without support for <em>transform-style: preserve-3d</em> you will see the fallback style (fill horizontal).</p>
</header>
<div class="wrapper">
<section>
<h2>fill horizontal</h2>
<button class="progress-button" data-style="fill" data-horizontal>Submit</button>
</section>
<section>
<h2>fill vertical</h2>
<button class="progress-button" data-style="fill" data-vertical>Submit</button>
</section>
<section>
<h2>shrink horizontal</h2>
<button class="progress-button" data-style="shrink" data-horizontal>Submit</button>
</section>
<section>
<h2>shrink vertical</h2>
<button class="progress-button" data-style="shrink" data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-angle-bottom <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-angle-top <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-angle-left <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Submit</button>
</section>
<section>
<h2>rotate-angle-right <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-side-down <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-down" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-side-up <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-up" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-side-left <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-left" data-perspective data-vertical>Submit</button>
</section>
<section>
<h2>rotate-side-right <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-right" data-perspective data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-back <br/>perspective</h2>
<button class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>flip-open <br/>perspective</h2>
<button class="progress-button" data-style="flip-open" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>slide-down <br/>horizontal</h2>
<button class="progress-button" data-style="slide-down" data-horizontal>Submit</button>
</section>
<section>
<h2>move-up <br/>horizontal</h2>
<button class="progress-button" data-style="move-up" data-horizontal>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>top-line <br/>horizontal</h2>
<button class="progress-button" data-style="top-line" data-horizontal>Submit</button>
</section>
<section>
<h2>lateral-lines <br/>vertical</h2>
<button class="progress-button" data-style="lateral-lines" data-vertical>Submit</button>
</section>
<!--section>
<h2>center-line <br/>horizontal</h2>
<button class="progress-button" data-style="center-line" data-horizontal>Submit</button>
</section-->
</div>
<section class="related">
<p>If you enjoyed these effects you might also like:</p>
<div><a href="http://tympanus.net/Development/CreativeButtons/"><h4>Creative Button Styles</h4></a></div>
<div><a href="http://lab.hakim.se/ladda/"><h4>Ladda by @hakimel</h4></a></div>
<div><a href="http://tympanus.net/Development/CreativeLoadingEffects/"><h4>Creative Loading Effects</h4></a></div>
</section>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/progressButton.js"></script>
<script>
[].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) {
new ProgressButton( bttn, {
callback : function( instance ) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance._setProgress( progress );
if( progress === 1 ) {
instance._stop(1);
clearInterval( interval );
}
}, 200 );
}
} );
} );
</script>
</body>
</html>