Skip to content

Commit eb7e2bd

Browse files
adamschwartzadamschwartz
committed
Add Center Circle theme (Closes CodeByZach#37)
1 parent e87f771 commit eb7e2bd

3 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎docs/welcome/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -460,6 +460,9 @@ <h2>Themes</h2>
460460
}, {
461461
name: 'bounce',
462462
title: 'Bounce'
463+
}, {
464+
name: 'center-circle',
465+
title: 'Center Circle'
463466
}];
464467

465468
var init = function() {

‎templates/pace-theme-center-circle.tmpl.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
5+
-webkit-user-select: none;
6+
-moz-user-select: none;
7+
user-select: none;
8+
9+
-webkit-perspective: 12rem;
10+
-moz-perspective: 12rem;
11+
-ms-perspective: 12rem;
12+
-o-perspective: 12rem;
13+
perspective: 12rem;
14+
15+
z-index: 2000;
16+
position: fixed;
17+
height: 6rem;
18+
width: 6rem;
19+
margin: auto;
20+
top: 0;
21+
left: 0;
22+
right: 0;
23+
bottom: 0;
24+
}
25+
26+
.pace.pace-inactive .pace-progress {
27+
display: none;
28+
}
29+
30+
.pace .pace-progress {
31+
position: fixed;
32+
z-index: 2000;
33+
}
34+
35+
.pace .pace-progress:after {
36+
content: attr(data-progress-text);
37+
display: block;
38+
position: absolute;
39+
left: 0;
40+
top: 0;
41+
height: 6rem;
42+
width: 6rem;
43+
line-height: 6rem;
44+
font-size: 2rem;
45+
border-radius: 50%;
46+
background: `Color(args.color || '#29d').clearer(0.2).rgbString()`;
47+
color: #fff;
48+
font-family: "Helvetica Neue", sans-serif;
49+
font-weight: 100;
50+
text-align: center;
51+
52+
-webkit-animation: pace-3d-spinner linear infinite 2s;
53+
-moz-animation: pace-3d-spinner linear infinite 2s;
54+
-ms-animation: pace-3d-spinner linear infinite 2s;
55+
-o-animation: pace-3d-spinner linear infinite 2s;
56+
animation: pace-3d-spinner linear infinite 2s;
57+
58+
-webkit-transform-style: preserve-3d;
59+
-moz-transform-style: preserve-3d;
60+
-ms-transform-style: preserve-3d;
61+
-o-transform-style: preserve-3d;
62+
transform-style: preserve-3d;
63+
}
64+
65+
@-webkit-keyframes pace-3d-spinner {
66+
from {
67+
-webkit-transform: rotateY(0deg);
68+
}
69+
to {
70+
-webkit-transform: rotateY(360deg);
71+
}
72+
}
73+
74+
@-moz-keyframes pace-3d-spinner {
75+
from {
76+
-moz-transform: rotateY(0deg);
77+
}
78+
to {
79+
-moz-transform: rotateY(360deg);
80+
}
81+
}
82+
83+
@-ms-keyframes pace-3d-spinner {
84+
from {
85+
-ms-transform: rotateY(0deg);
86+
}
87+
to {
88+
-ms-transform: rotateY(360deg);
89+
}
90+
}
91+
92+
@-o-keyframes pace-3d-spinner {
93+
from {
94+
-o-transform: rotateY(0deg);
95+
}
96+
to {
97+
-o-transform: rotateY(360deg);
98+
}
99+
}
100+
101+
@keyframes pace-3d-spinner {
102+
from {
103+
transform: rotateY(0deg);
104+
}
105+
to {
106+
transform: rotateY(360deg);
107+
}
108+
}

‎themes/pace-theme-center-circle.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* This is a compiled file, you should be editing the file in the templates directory */
2+
.pace {
3+
-webkit-pointer-events: none;
4+
pointer-events: none;
5+
-webkit-user-select: none;
6+
-moz-user-select: none;
7+
user-select: none;
8+
9+
-webkit-perspective: 12rem;
10+
z-index: 2000;
11+
position: fixed;
12+
height: 6rem;
13+
width: 6rem;
14+
margin: auto;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
}
20+
21+
.pace.pace-inactive .pace-progress {
22+
display: none;
23+
}
24+
25+
.pace .pace-progress {
26+
position: fixed;
27+
z-index: 2000;
28+
}
29+
30+
.pace .pace-progress:after {
31+
content: attr(data-progress-text);
32+
display: block;
33+
position: absolute;
34+
left: 0;
35+
top: 0;
36+
height: 6rem;
37+
width: 6rem;
38+
line-height: 6rem;
39+
font-size: 2rem;
40+
border-radius: 50%;
41+
background: rgba(34, 153, 221, 0.8);
42+
color: #fff;
43+
font-family: "Helvetica Neue", sans-serif;
44+
font-weight: 100;
45+
text-align: center;
46+
47+
-webkit-animation: pace-3d-spinner linear infinite 2s;
48+
-moz-animation: pace-3d-spinner linear infinite 2s;
49+
-ms-animation: pace-3d-spinner linear infinite 2s;
50+
-o-animation: pace-3d-spinner linear infinite 2s;
51+
animation: pace-3d-spinner linear infinite 2s;
52+
53+
-webkit-transform-style: preserve-3d;
54+
-moz-transform-style: preserve-3d;
55+
-ms-transform-style: preserve-3d;
56+
-o-transform-style: preserve-3d;
57+
transform-style: preserve-3d;
58+
}
59+
60+
@-webkit-keyframes pace-3d-spinner {
61+
from {
62+
-webkit-transform: rotateY(0deg);
63+
}
64+
to {
65+
-webkit-transform: rotateY(360deg);
66+
}
67+
}
68+
69+
@-moz-keyframes pace-3d-spinner {
70+
from {
71+
-moz-transform: rotateY(0deg);
72+
}
73+
to {
74+
-moz-transform: rotateY(360deg);
75+
}
76+
}
77+
78+
@-ms-keyframes pace-3d-spinner {
79+
from {
80+
-ms-transform: rotateY(0deg);
81+
}
82+
to {
83+
-ms-transform: rotateY(360deg);
84+
}
85+
}
86+
87+
@-o-keyframes pace-3d-spinner {
88+
from {
89+
-o-transform: rotateY(0deg);
90+
}
91+
to {
92+
-o-transform: rotateY(360deg);
93+
}
94+
}
95+
96+
@keyframes pace-3d-spinner {
97+
from {
98+
transform: rotateY(0deg);
99+
}
100+
to {
101+
transform: rotateY(360deg);
102+
}
103+
}

0 commit comments

Comments
 (0)