-
-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathindex.html
95 lines (83 loc) · 2.54 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Animated Goal Progress jQuery plugin by Tinacious Design</title>
<link rel="stylesheet" type="text/css" href="https://gistcdn.githack.com/tinacious/d89f3daf0e4555a2dc23fd3beb14e179/raw/5bd576497143efb5c1374cc3a02fa7e9191bc678/plugin-styles.css">
<!-- plugin files -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
/* demo theme styles */
.container {
max-width: 600px;
}
.site-header .logo {
width: 100%;
}
.logo span,
.logo img {
display: block;
float: left;
}
.logo span {
padding: 10px 0 0 10px;
}
.site-header {
padding: 5px 0;
z-index: 10;
}
@media (max-width: 767px) {
.site-header .logo span {
display: block;
}
}
.demo-wrapper {
margin-bottom: 50px;
line-height: 1.6;
}
</style>
<link rel="stylesheet" type="text/css" href="goalProgress.css" />
<script type="text/javascript" src="goalProgress.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sample_goal').goalProgress({
goalAmount: 600,
currentAmount: 400,
textBefore: '$',
textAfter: ' raised.'
});
});
</script>
</head>
<body>
<header id="header" class="site-header">
<div class="container">
<div class="logo">
<img src="https://tinaciousdesign.com/images/td-logo.png" alt="Tinacious Design logo" width="50">
<span><b><a href="https://tinaciousdesign.com/">Tinacious Design</a></b> – plugin demos</span>
</div>
</div>
</header>
<div class="site-content">
<div class="container">
<div class="demo-wrapper">
<h1>Animated Goal Progress Bar jQuery plugin</h1>
<p>
This plugin allows you to create an animated progress bar using jQuery. Just fill in the required input and the
plugin calculates the progress of your goal and animates the bar. You can specify text to put before and after
the amount raised.
</p>
<p>
You are welcome to download the plugin and use it in your personal projects provided that you leave the credits
in the source code.
</p>
</div>
<div class="demo-wrapper">
<div id="sample_goal"></div>
</div>
<p>
<a href="https://github.com/tinacious/goalProgress" class="btn">Download on Github</a>
</p>
</div>
</body>
</html>