Skip to content

Commit af6ed36

Browse files
jenssimonjenssimon
committed
docs: improve demo
1 parent ea0ac4f commit af6ed36

File tree

15 files changed

+555
-1183
lines changed

15 files changed

+555
-1183
lines changed

‎.stylelintignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
coverage/
2+
demo/dist/
3+
dist/
4+

.vscode/extensions.yml renamed to .vscode/extensions.json

File renamed without changes.

‎.vscode/settings.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"eslint.format.enable": true,
3+
"editor.codeActionsOnSave": {
4+
"source.fixAll.eslint": "explicit",
5+
},
6+
"stylelint.validate": [
7+
"css"
8+
],
9+
"editor.formatOnSave": false
10+
}

‎.vscode/settings.yml‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎demo/.eslintrc‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
{
22
"root": true,
33
"extends": [
4-
"@jenssimon/base/frontend-react"
5-
]
4+
"@jenssimon/base/frontend"
5+
],
6+
"rules": {
7+
"no-await-in-loop": "off",
8+
"no-constant-condition": "off",
9+
"no-restricted-syntax": "off",
10+
"promise/prefer-await-to-then": "off",
11+
"import/no-named-as-default": "off",
12+
"import/no-named-as-default-member": "off",
13+
"unicorn/prefer-top-level-await": "off"
14+
}
615
}

‎demo/demo.css‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎demo/demo.html‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎demo/demo.js‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎demo/index.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
background-color: #444;
3+
}
4+
5+
.loader {
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
z-index: 9999;
10+
display: none;
11+
align-items: center;
12+
justify-content: center;
13+
width: 100%;
14+
height: 100%;
15+
opacity: 0;
16+
transition: opacity .25s;
17+
transition-delay: .3s;
18+
19+
&.loader.is-active {
20+
top: 0;
21+
left: 0;
22+
display: flex;
23+
opacity: 1;
24+
}
25+
}
26+
27+
.section {
28+
height: 25vh;
29+
padding: 10px;
30+
margin: 10px;
31+
background-color: white;
32+
border: 5px solid;
33+
border-radius: 20px;
34+
transition: background-color .5s;
35+
36+
&.section-green {
37+
background-color: rgb(205 238 205);
38+
border-color: green;
39+
40+
&.is-working {
41+
background-color: rgb(105 190 105);
42+
}
43+
}
44+
45+
&.section-blue {
46+
background-color: rgb(215 245 255);
47+
border-color: blue;
48+
49+
&.is-working {
50+
background-color: rgb(105 169 190);
51+
}
52+
}
53+
54+
&.section-red {
55+
background-color: rgb(246 232 234);
56+
border-color: red;
57+
58+
&.is-working {
59+
background-color: rgb(216 107 125);
60+
}
61+
}
62+
}
63+

‎demo/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>promise-loading-spinner demo</title>
5+
<link rel="stylesheet" href="./index.css" />
6+
<script src="./index.js" type="module"></script>
7+
</head>
8+
<body>
9+
<div class="section section-green"></div>
10+
<div class="section section-blue"></div>
11+
<div class="section section-red"></div>
12+
13+
<div class="loader" id="js-page-loader">
14+
<img src="bars.svg" alt="loader" />
15+
</div>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)