Skip to content

Commit a3f94c9

Browse files
adamschwartzadamschwartz
committed
Corner indicator theme
1 parent f95a042 commit a3f94c9

3 files changed

Lines changed: 75 additions & 1 deletion

File tree

‎.hsdoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
title: "Pace"
22
source: "*.js"
33
examples: "**/*.md"
4-
assets: "{docs/themes/index.html,docs/themes/pace-theme-template.html,pace-theme-minimal.css,pace-theme-flash.css,pace-theme-barber-shop.css,pace-theme-mac-osx.css,pace-theme-fill-left.css,pace-theme-big-counter.css}"
4+
assets: "{docs/themes/index.html,docs/themes/pace-theme-template.html,pace-theme-minimal.css,pace-theme-flash.css,pace-theme-barber-shop.css,pace-theme-mac-osx.css,pace-theme-fill-left.css,pace-theme-big-counter.css,pace-theme-corner-indicator.css}"

‎docs/themes/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ <h2>Themes</h2>
7373
name: 'big-counter',
7474
title: 'Big Counter',
7575
description: 'Inspired by <a href="http://tympanus.net/Development/CreativeLoadingEffects/" rel="nofollow" target="_blank">Codedrops</a>'
76+
}, {
77+
name: 'corner-indicator',
78+
title: 'Corner Indicator',
79+
description: 'Inspired by <a href="http://tympanus.net/Development/CreativeLoadingEffects/" rel="nofollow" target="_blank">Codedrops</a>'
7680
}];
7781

7882
$.each(themes, function(i, theme){
@@ -85,6 +89,8 @@ <h2>Themes</h2>
8589

8690
$('iframe').load(function(){
8791
$(this).contents().find('body').append('<link rel="stylesheet" href="/pace/pace-theme-' + $(this).data('theme') + '.css" />');
92+
93+
$(this).contents().find('.pace').addClass('pace-active');
8894
});
8995
})();
9096
</script>

‎pace-theme-corner-indicator.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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-activity {
10+
display: block;
11+
position: fixed;
12+
top: 0;
13+
right: 0;
14+
width: 300px;
15+
height: 300px;
16+
background: #29d;
17+
-webkit-transition: -webkit-transform 0.3s;
18+
transition: transform 0.3s;
19+
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
20+
transform: translateX(100%) translateY(-100%) rotate(45deg);
21+
pointer-events: none;
22+
}
23+
24+
.pace.pace-active .pace-activity {
25+
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
26+
transform: translateX(50%) translateY(-50%) rotate(45deg);
27+
}
28+
29+
.pace .pace-activity::before,
30+
.pace .pace-activity::after {
31+
position: absolute;
32+
bottom: 30px;
33+
left: 50%;
34+
display: block;
35+
border: 5px solid #fff;
36+
border-radius: 50%;
37+
content: '';
38+
}
39+
40+
.pace .pace-activity::before {
41+
margin-left: -40px;
42+
width: 80px;
43+
height: 80px;
44+
border-right-color: rgba(0, 0, 0, .2);
45+
border-left-color: rgba(0, 0, 0, .2);
46+
-webkit-animation: pace-rotation 3s linear infinite;
47+
animation: pace-rotation 3s linear infinite;
48+
}
49+
50+
.pace .pace-activity::after {
51+
bottom: 50px;
52+
margin-left: -20px;
53+
width: 40px;
54+
height: 40px;
55+
border-top-color: rgba(0, 0, 0, .2);
56+
border-bottom-color: rgba(0, 0, 0, .2);
57+
-webkit-animation: pace-rotation 1s linear infinite;
58+
animation: pace-rotation 1s linear infinite;
59+
}
60+
61+
@-webkit-keyframes pace-rotation {
62+
0% { -webkit-transform: rotate(0deg); }
63+
100% { -webkit-transform: rotate(359deg); }
64+
}
65+
@keyframes pace-rotation {
66+
0% { transform: rotate(0deg); }
67+
100% { transform: rotate(359deg); }
68+
}

0 commit comments

Comments
 (0)