Skip to content

Commit 59d02dc

Browse files
adamschwartzadamschwartz
committed
Add @gavJackson's "Loading Bar" theme (Closes CodeByZach#53)
1 parent ca57260 commit 59d02dc

3 files changed

Lines changed: 168 additions & 0 deletions

File tree

‎docs/welcome/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,9 @@ <h2>Themes</h2>
464464
}, {
465465
name: 'center-circle',
466466
title: 'Center Circle'
467+
}, {
468+
name: 'loading-bar',
469+
title: 'Loading Bar'
467470
}];
468471

469472
var init = function() {

‎templates/pace-theme-loading-bar.tmpl.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.pace {
2+
-webkit-box-sizing: border-box;
3+
-moz-box-sizing: border-box;
4+
-ms-box-sizing: border-box;
5+
-o-box-sizing: border-box;
6+
box-sizing: border-box;
7+
8+
-webkit-border-radius: 10px;
9+
-moz-border-radius: 10px;
10+
border-radius: 10px;
11+
12+
-moz-background-clip: padding;
13+
-webkit-background-clip: padding-box;
14+
background-clip: padding-box;
15+
16+
-webkit-pointer-events: none;
17+
pointer-events: none;
18+
-webkit-user-select: none;
19+
-moz-user-select: none;
20+
user-select: none;
21+
22+
z-index: 2000;
23+
position: fixed;
24+
margin: auto;
25+
top: 12px;
26+
left: 0;
27+
right: 0;
28+
bottom: 0;
29+
width: 200px;
30+
height: 25px;
31+
border: 2px solid `args.color || "#29d"`;
32+
background-color: #fff;
33+
}
34+
35+
.pace .pace-progress {
36+
-webkit-box-sizing: border-box;
37+
-moz-box-sizing: border-box;
38+
-ms-box-sizing: border-box;
39+
-o-box-sizing: border-box;
40+
box-sizing: border-box;
41+
42+
-webkit-border-radius: 5px;
43+
-moz-border-radius: 5px;
44+
border-radius: 5px;
45+
46+
-webkit-background-clip: padding-box;
47+
-moz-background-clip: padding;
48+
background-clip: padding-box;
49+
50+
-webkit-transition: width 1s ease-in-out 1s linear;
51+
-moz-transition: width 1s ease-in-out 1s linear;
52+
-ms-transition: width 1s ease-in-out 1s linear;
53+
-o-transition: width 1s ease-in-out 1s linear;
54+
transition: width 1s ease-in-out 1s linear;
55+
56+
-webkit-transform: translate3d(0, 0, 0);
57+
transform: translate3d(0, 0, 0);
58+
59+
max-width: 190px;
60+
position: fixed;
61+
z-index: 2000;
62+
display: block;
63+
position: absolute;
64+
left: 3px;
65+
top: 3px;
66+
height: 15px;
67+
font-size: 12px;
68+
background: `args.color || "#29d"`;
69+
color: `args.color || "#29d"`;
70+
line-height: 60px;
71+
font-weight: bold;
72+
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
73+
}
74+
75+
.pace .pace-progress:after {
76+
content: attr(data-progress-text);
77+
display: inline-block;
78+
}
79+
80+
.pace.pace-inactive {
81+
display: none;
82+
}

‎themes/pace-theme-loading-bar.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* This is a compiled file, you should be editing the file in the templates directory */
2+
.pace {
3+
-webkit-box-sizing: border-box;
4+
-moz-box-sizing: border-box;
5+
-ms-box-sizing: border-box;
6+
-o-box-sizing: border-box;
7+
box-sizing: border-box;
8+
9+
-webkit-border-radius: 10px;
10+
-moz-border-radius: 10px;
11+
border-radius: 10px;
12+
13+
-moz-background-clip: padding;
14+
-webkit-background-clip: padding-box;
15+
background-clip: padding-box;
16+
17+
-webkit-pointer-events: none;
18+
pointer-events: none;
19+
-webkit-user-select: none;
20+
-moz-user-select: none;
21+
user-select: none;
22+
23+
z-index: 2000;
24+
position: fixed;
25+
margin: auto;
26+
top: 12px;
27+
left: 0;
28+
right: 0;
29+
bottom: 0;
30+
width: 200px;
31+
height: 25px;
32+
border: 2px solid #29d;
33+
background-color: #fff;
34+
}
35+
36+
.pace .pace-progress {
37+
-webkit-box-sizing: border-box;
38+
-moz-box-sizing: border-box;
39+
-ms-box-sizing: border-box;
40+
-o-box-sizing: border-box;
41+
box-sizing: border-box;
42+
43+
-webkit-border-radius: 5px;
44+
-moz-border-radius: 5px;
45+
border-radius: 5px;
46+
47+
-webkit-background-clip: padding-box;
48+
-moz-background-clip: padding;
49+
background-clip: padding-box;
50+
51+
-webkit-transition: width 1s ease-in-out 1s linear;
52+
-moz-transition: width 1s ease-in-out 1s linear;
53+
-ms-transition: width 1s ease-in-out 1s linear;
54+
-o-transition: width 1s ease-in-out 1s linear;
55+
transition: width 1s ease-in-out 1s linear;
56+
57+
-webkit-transform: translate3d(0, 0, 0);
58+
transform: translate3d(0, 0, 0);
59+
60+
max-width: 190px;
61+
position: fixed;
62+
z-index: 2000;
63+
display: block;
64+
position: absolute;
65+
left: 3px;
66+
top: 3px;
67+
height: 15px;
68+
font-size: 12px;
69+
background: #29d;
70+
color: #29d;
71+
line-height: 60px;
72+
font-weight: bold;
73+
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
74+
}
75+
76+
.pace .pace-progress:after {
77+
content: attr(data-progress-text);
78+
display: inline-block;
79+
}
80+
81+
.pace.pace-inactive {
82+
display: none;
83+
}

0 commit comments

Comments
 (0)