-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (144 loc) · 5.38 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css-3d-progress</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>CSS <strong>3D</strong> Progress</h1>
</header>
<main>
<article>
<css-3d-progress id="progress1" percent="60"></css-3d-progress>
<p>Try another color :)</p>
<nav class="colors">
<button class="item red active">Red</button>
<button class="item cyan">Cyan</button>
<button class="item lime">Lime</button>
</nav>
</article>
<article>
<css-3d-progress
percent="25"
id="progress2"
back-shadow="none"
is-animation="true"
bottom-shadow="none"
stroke-color="#ff5722b3, #FF0066, #FFC107"
></css-3d-progress>
<p>Try another position :)</p>
<nav class="positions">
<button class="item active">1/4</button>
<button class="item">2/4</button>
<button class="item">3/4</button>
<button class="item">Full</button>
</nav>
</article>
<article>
<div class="container">
<css-3d-progress
percent="40"
stroke-color="rgba(10, 64, 105, 0.6)"
back-shadow="-0.5em -1.5em 4em rgba(10, 64, 105, 0.8)"
bottom-shadow="0em 0em 2em rgba(10, 64, 105, 0.8)"
></css-3d-progress>
<css-3d-progress
percent="60"
stroke-color="rgba(241, 196, 15, 0.6)"
back-shadow="-0.5em -1.5em 4em rgba(241, 196, 15, 0.8)"
bottom-shadow="0em 0em 2em rgba(241, 196, 15, 0.8)"
></css-3d-progress>
<css-3d-progress percent="40"></css-3d-progress>
</div>
<p><em>It's liquid</em>, so adding a bit of code you can make charts like this :P</p>
<nav class="combinations">
<button class="item active">E-1</button>
<button class="item">E-2</button>
<button class="item">E-3</button>
<button class="item">E-4</button>
</nav>
</article>
</main>
<script defer src="./css-3d-progress.js"></script>
<script>
// Click to switch colors
const options = [
{
"stroke-color": "rgba(236, 0, 140, 0.6)",
"back-shadow": "-0.5em -1.5em 4em rgba(236, 0, 140, 0.8)",
"bottom-shadow": "0em 0em 2em rgba(236, 0, 140, 0.8)",
},
{
"stroke-color": "rgba(87, 202, 244, 0.6)",
"back-shadow": "-0.5em -1.5em 4em #57caf4",
"bottom-shadow": "0em 0em 2em #57caf4",
},
{
"stroke-color": "rgba(118, 201, 0, 0.6)",
"back-shadow": "-0.5em -1.5em 4em #76c900",
"bottom-shadow": "0em 0em 2em #76c900",
},
];
const colors = document.querySelectorAll(".colors .item");
colors.forEach((color, index) => {
color.addEventListener("click", () => {
const progress = document.querySelector(`#progress1`);
progress.setAttribute("stroke-color", options[index]["stroke-color"]);
progress.setAttribute("back-shadow", options[index]["back-shadow"]);
progress.setAttribute("bottom-shadow", options[index]["bottom-shadow"]);
const currentActive = document.querySelector(".colors .item.active");
currentActive.classList.remove("active");
color.classList.add("active");
});
});
// Click to switch position
const positionList = [25, 50, 75, 100];
const positions = document.querySelectorAll(".positions .item");
positions.forEach((position, index) => {
position.addEventListener("click", () => {
const progress = document.querySelector(`#progress2`);
progress.setAttribute("percent", positionList[index]);
const currentActive = document.querySelector(".positions .item.active");
currentActive.classList.remove("active");
position.classList.add("active");
});
});
// Click to switch between different combinations
const combinationList = [
{
percents: [40, 40, 40],
"grid-template-columns": "1fr 1fr 1fr",
},
{
percents: [60, 30, 20],
"grid-template-columns": "2fr 0.5fr 0.5fr",
},
{
percents: [40, 40, 70],
"grid-template-columns": "0.5fr 0.5fr 2fr",
},
{
percents: [50, 70, 40],
"grid-template-columns": "0.5fr 2fr 0.5fr",
},
];
const container = document.querySelector(".container");
const combinations = document.querySelectorAll(".combinations .item");
const progresses = document.querySelectorAll(".container css-3d-progress");
combinations.forEach((combination, index) => {
combination.addEventListener("click", () => {
const currentActive = document.querySelector(".combinations .item.active");
currentActive.classList.remove("active");
combination.classList.add("active");
container.style.gridTemplateColumns = combinationList[index]["grid-template-columns"];
progresses.forEach((progress, j) => {
progress.setAttribute("percent", combinationList[index]["percents"][j]);
});
});
});
</script>
</body>
</html>