-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (63 loc) · 2.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Houdini</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<section id="no-houdini">
Looks like you don't have Houdini support in your browser yet.
If you're in Google Chrome you can try going to
<code>chrome://flags/#enable-experimental-web-platform-features</code>
and enabling "Experimental Web Platform Features" & then reloading this page!
</section>
<div style="display: grid; grid-template-columns: 50% 50%;">
<textarea id="houdini-bg"></textarea>
<textarea id="loading-circle">0%</textarea>
</div>
<div class="sibling" />
<script>
if (CSS.registerProperty !== undefined) {
document.querySelector('#no-houdini').style.visibility = "hidden";
CSS.registerProperty(
{
name: '--custom-color',
syntax: '<color>',
initialValue: 'red',
inherits: false
},
{
name: '--side-length',
syntax: '<number>',
initialValue: '1',
inherits: false
},
{
name: '--line-color',
syntax: '<color>',
initialValue: 'black',
inherits: false
},
{
name: '--line-width',
syntax: '<number>',
initialValue: '1',
inherits: false
},
{
name: '--percentage',
syntax: '<number>',
initialValue: '100',
inherits: true
}
);
CSS.paintWorklet.addModule('necker-worklet.js');
CSS.paintWorklet.addModule('loading-worklet.js');
}
</script>
<script src="loading-worklet-anim.js"></script>
</body>
</html>