Skip to content

Commit 2caaff9

Browse files
zackbloomzackbloom
committed
Merge branch 'master' of github.com:HubSpot/pace
Conflicts: pace.coffee pace.css pace.min.js
2 parents ea8cb5f + 5e8c8b6 commit 2caaff9

13 files changed

Lines changed: 336 additions & 5 deletions

‎.hsdoc‎

Whitespace-only changes.

‎docs/themes/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<head>
2+
<style>
3+
body {
4+
margin: 0px;
5+
color: #444;
6+
font-family: "Helvetica Neue", sans-serif;
7+
}
8+
.page {
9+
width: 800px;
10+
margin: 0 auto;
11+
max-width: 100%;
12+
padding: 40px 12px;
13+
-webkit-box-sizing: border-box;
14+
-moz-box-sizing: border-box;
15+
box-sizing: border-box;
16+
}
17+
.themes {
18+
overflow: hidden;
19+
}
20+
.theme {
21+
float: left;
22+
width: 46%;
23+
margin: 0 4% 0 0;
24+
}
25+
.browser {
26+
background: #eee;
27+
border-radius: 4px;
28+
border: 1px solid #aaa;
29+
width: 100%;
30+
height: 100px;
31+
padding-top: 20px;
32+
margin: 0 0 20px;
33+
}
34+
iframe {
35+
border: 0;
36+
background: #fff;
37+
height: 100%;
38+
width: 100%;
39+
border-radius: 0 0 4px 4px;
40+
box-shadow: 0 -1px #aaa;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div class="page">
46+
<h1>Pace</h1>
47+
<h2>Themes</h2>
48+
<div class="themes">
49+
<div class="theme">
50+
<h3>Minimal</h3>
51+
<div class="browser"><iframe src="pace-theme-minimal.html"></iframe></div>
52+
</div>
53+
<div class="theme">
54+
<h3>Flash</h3>
55+
<div class="browser"><iframe src="pace-theme-flash.html"></iframe></div>
56+
</div>
57+
<div class="theme">
58+
<h3>Barber Shop</h3>
59+
<div class="browser"><iframe src="pace-theme-barber-shop.html"></iframe></div>
60+
</div>
61+
<div class="theme">
62+
<h3>Mac OSX</h3>
63+
<div class="browser"><iframe src="pace-theme-mac-osx.html"></iframe></div>
64+
</div>
65+
</div>
66+
</div>
67+
</body>

‎docs/themes/pace-theme-barber-shop.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<head>
2+
<link rel="stylesheet" href="../pace-theme-barber-shop.css" />
3+
</head>
4+
<body>
5+
<div class="pace">
6+
<div class="pace-progress" style="width: 50%;">
7+
<div class="pace-progress-inner"></div>
8+
</div>
9+
<div class="pace-activity"></div>
10+
</div>
11+
</body>

‎docs/themes/pace-theme-flash.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<head>
2+
<link rel="stylesheet" href="../pace-theme-flash.css" />
3+
</head>
4+
<body>
5+
<div class="pace">
6+
<div class="pace-progress" style="width: 50%;">
7+
<div class="pace-progress-inner"></div>
8+
</div>
9+
<div class="pace-activity"></div>
10+
</div>
11+
</body>

‎docs/themes/pace-theme-mac-osx.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<head>
2+
<link rel="stylesheet" href="../pace-theme-mac-osx.css" />
3+
</head>
4+
<body>
5+
<div class="pace">
6+
<div class="pace-progress" style="width: 50%;">
7+
<div class="pace-progress-inner"></div>
8+
</div>
9+
<div class="pace-activity"></div>
10+
</div>
11+
</body>

‎docs/themes/pace-theme-minimal.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<head>
2+
<link rel="stylesheet" href="../pace-theme-minimal.css" />
3+
</head>
4+
<body>
5+
<div class="pace">
6+
<div class="pace-progress" style="width: 50%;">
7+
<div class="pace-progress-inner"></div>
8+
</div>
9+
<div class="pace-activity"></div>
10+
</div>
11+
</body>

‎pace-theme-barber-shop.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
user-select: none;
7+
}
8+
9+
.pace .pace-progress {
10+
background-color: #29d;
11+
position: fixed;
12+
z-index: 99999999999999;
13+
top: 0;
14+
left: 0;
15+
height: 12px;
16+
overflow: hidden;
17+
}
18+
19+
.pace .pace-progress-inner {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
right: -32px;
24+
bottom: 0;
25+
26+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
27+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
28+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
29+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
30+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
31+
-webkit-background-size: 32px 32px;
32+
-moz-background-size: 32px 32px;
33+
-o-background-size: 32px 32px;
34+
background-size: 32px 32px;
35+
36+
-webkit-animation: pace-stripe-animation 500ms linear infinite;
37+
-moz-animation: pace-stripe-animation 500ms linear infinite;
38+
-ms-animation: pace-stripe-animation 500ms linear infinite;
39+
-o-animation: pace-stripe-animation 500ms linear infinite;
40+
animation: pace-stripe-animation 500ms linear infinite;
41+
}
42+
43+
@-webkit-keyframes pace-stripe-animation {
44+
0% { -webkit-transform: none; transform: none; }
45+
100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
46+
}
47+
@-moz-keyframes pace-stripe-animation {
48+
0% { -moz-transform: none; transform: none; }
49+
100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
50+
}
51+
@-o-keyframes pace-stripe-animation {
52+
0% { -o-transform: none; transform: none; }
53+
100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
54+
}
55+
@-ms-keyframes pace-stripe-animation {
56+
0% { -ms-transform: none; transform: none; }
57+
100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
58+
}
59+
@keyframes pace-stripe-animation {
60+
0% { transform: none; transform: none; }
61+
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
62+
}

‎pace-theme-flash.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
user-select: none;
7+
}
8+
9+
.pace .pace-progress {
10+
background: #29d;
11+
12+
position: fixed;
13+
z-index: 99999999999999;
14+
top: 0;
15+
left: 0;
16+
17+
height: 2px;
18+
}
19+
20+
.pace .pace-progress-inner {
21+
display: block;
22+
position: absolute;
23+
right: 0px;
24+
width: 100px;
25+
height: 100%;
26+
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
27+
opacity: 1.0;
28+
29+
-webkit-transform: rotate(3deg) translate(0px, -4px);
30+
-moz-transform: rotate(3deg) translate(0px, -4px);
31+
-ms-transform: rotate(3deg) translate(0px, -4px);
32+
-o-transform: rotate(3deg) translate(0px, -4px);
33+
transform: rotate(3deg) translate(0px, -4px);
34+
}
35+
36+
.pace .pace-activity {
37+
display: block;
38+
position: fixed;
39+
z-index: 100;
40+
top: 15px;
41+
right: 15px;
42+
width: 14px;
43+
height: 14px;
44+
45+
border: solid 2px transparent;
46+
border-top-color: #29d;
47+
border-left-color: #29d;
48+
border-radius: 10px;
49+
50+
-webkit-animation: pace-spinner 400ms linear infinite;
51+
-moz-animation: pace-spinner 400ms linear infinite;
52+
-ms-animation: pace-spinner 400ms linear infinite;
53+
-o-animation: pace-spinner 400ms linear infinite;
54+
animation: pace-spinner 400ms linear infinite;
55+
}
56+
57+
@-webkit-keyframes pace-spinner {
58+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
59+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
60+
}
61+
@-moz-keyframes pace-spinner {
62+
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
63+
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
64+
}
65+
@-o-keyframes pace-spinner {
66+
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
67+
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
68+
}
69+
@-ms-keyframes pace-spinner {
70+
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
71+
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
72+
}
73+
@keyframes pace-spinner {
74+
0% { transform: rotate(0deg); transform: rotate(0deg); }
75+
100% { transform: rotate(360deg); transform: rotate(360deg); }
76+
}

‎pace-theme-mac-osx.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
user-select: none;
7+
}
8+
9+
.pace .pace-progress {
10+
background-color: #78C0F0;
11+
position: fixed;
12+
z-index: 99999999999999;
13+
top: 0;
14+
left: 0;
15+
height: 12px;
16+
overflow: hidden;
17+
-webkit-border-radius: 0 0 4px 0;
18+
-moz-border-radius: 0 0 4px 0;
19+
-o-border-radius: 0 0 4px 0;
20+
border-radius: 0 0 4px 0;
21+
-webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
22+
-moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
23+
-o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
24+
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
25+
}
26+
27+
.pace .pace-progress-inner {
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
right: -28px;
32+
bottom: 0;
33+
34+
background-image: -webkit-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
35+
background-image: -moz-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
36+
background-image: -o-radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
37+
background-image: radial-gradient(rgba(21, 146, 226, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
38+
-webkit-background-size: 28px 100%;
39+
-moz-background-size: 28px 100%;
40+
-o-background-size: 28px 100%;
41+
background-size: 28px 100%;
42+
43+
-webkit-animation: pace-stripe-animation 500ms linear infinite;
44+
-moz-animation: pace-stripe-animation 500ms linear infinite;
45+
-ms-animation: pace-stripe-animation 500ms linear infinite;
46+
-o-animation: pace-stripe-animation 500ms linear infinite;
47+
animation: pace-stripe-animation 500ms linear infinite;
48+
}
49+
50+
@-webkit-keyframes pace-stripe-animation {
51+
0% { -webkit-transform: none; transform: none; }
52+
100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
53+
}
54+
@-moz-keyframes pace-stripe-animation {
55+
0% { -moz-transform: none; transform: none; }
56+
100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
57+
}
58+
@-o-keyframes pace-stripe-animation {
59+
0% { -o-transform: none; transform: none; }
60+
100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
61+
}
62+
@-ms-keyframes pace-stripe-animation {
63+
0% { -ms-transform: none; transform: none; }
64+
100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
65+
}
66+
@keyframes pace-stripe-animation {
67+
0% { transform: none; transform: none; }
68+
100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
69+
}

‎pace-theme-minimal.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.pace .pace-progress {
2+
background: #29d;
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
height: 2px;
7+
}

0 commit comments

Comments
 (0)