Skip to content

Commit c2784f4

Browse files
sergeysinyavskysergeysinyavsky
committed
Added customization and readme
1 parent 486d718 commit c2784f4

File tree

4 files changed

+103
-8
lines changed

4 files changed

+103
-8
lines changed

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
11
# HTML Loader for Defold
22

3+
This extension adds a loading percentage with frame and a spinning circle in the corner. You can also change the background color and set the size for the splash image.
4+
5+
![Example](docs/example.png)
6+
7+
The circle will be hidden when the game is loaded.
8+
You can show it again and add text with percentages. For example when you load resources with liveupdate.
9+
10+
```lua
11+
function init(self)
12+
if html_loader then
13+
html_loader.show()
14+
html_loader.set_text("Loading")
15+
16+
self.percent = 0
17+
timer.delay(0.2, true, function(self, handle, time_elapsed)
18+
self.percent = self.percent + 1
19+
html_loader.set_progress(self.percent)
20+
if self.percent == 100 then
21+
timer.cancel(handle)
22+
html_loader.hide()
23+
end
24+
end)
25+
end
26+
end
27+
```
28+
29+
## The `game.project` Settings
30+
31+
You can set these **optional** settings in `game.project`.
32+
33+
```ini
34+
[html_loader]
35+
background_size = 80%
36+
background_color = rgba(255,255,255,1)
37+
loader_main_color = rgba(26, 114, 235, 1)
38+
loader_additional_color = rgba(26, 114, 235, 0.2)
39+
loader_frame_color = rgba(255, 255, 255, 1)
40+
```
41+
42+
* `background_size` <kbd>string</kbd> _optional_ Overloads the splash image size value for ".canvas-app-canvas". None by default.
43+
* `background_color` <kbd>string</kbd> _optional_ Overloads the background color value for ".canvas-app-canvas". None by default.
44+
* `loader_main_color` <kbd>string</kbd> _optional_ The main color of the loader. Used in circle, progress bar and text. Default: **#1a72eb**
45+
* `loader_additional_color` <kbd>string</kbd> _optional_ The additional color of the loader. Used in circle, progress bar. Default: **rgba(1, 1, 255, 0.2)**
46+
* `loader_frame_color` <kbd>string</kbd> _optional_ Frame color around progress text. Default: **white**
47+
348
## Credits
449

550
Made by [PotatoJam](https://github.com/potatojam).

‎docs/example.png

37.8 KB
Loading

‎game.project

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,9 @@ show_made_with_defold = 0
2222
show_console_banner = 0
2323
scale_mode = stretch
2424

25+
[html_loader]
26+
background_size = 80%
27+
background_color = rgba(255,255,255,1)
28+
loader_main_color = rgba(26, 114, 235, 1)
29+
loader_additional_color = rgba(26, 114, 235, 0.2)
30+
loader_frame_color = rgba(255, 255, 255, 1)

‎html_loader/manifests/web/engine_template.html

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,22 @@
1212
.loader {
1313
font-size: 2.5vh; /* Loader size */
1414
text-indent: -9999em;
15-
border-top: 1.1em solid rgba(1, 1, 255, 0.2);
16-
border-right: 1.1em solid rgba(1, 1, 255, 0.2);
17-
border-bottom: 1.1em solid rgba(1, 1, 255, 0.2);
18-
border-left: 1.1em solid #1a72eb;
15+
{{#html_loader.loader_additional_color}}
16+
border-top: 1.1em solid {{html_loader.loader_additional_color}};
17+
border-right: 1.1em solid {{html_loader.loader_additional_color}};
18+
border-bottom: 1.1em solid {{html_loader.loader_additional_color}};
19+
{{/html_loader.loader_additional_color}}
20+
{{^html_loader.loader_additional_color}}
21+
border-top: 1.1em solid rgba(1, 1, 255, 0.2);
22+
border-right: 1.1em solid rgba(1, 1, 255, 0.2);
23+
border-bottom: 1.1em solid rgba(1, 1, 255, 0.2);
24+
{{/html_loader.loader_additional_color}}
25+
{{#html_loader.loader_main_color}}
26+
border-left: 1.1em solid {{html_loader.loader_main_color}};
27+
{{/html_loader.loader_main_color}}
28+
{{^html_loader.loader_main_color}}
29+
border-left: 1.1em solid #1a72eb;
30+
{{/html_loader.loader_main_color}}
1931
-webkit-transform: translateZ(0);
2032
-ms-transform: translateZ(0);
2133
transform: translateZ(0);
@@ -53,10 +65,20 @@
5365
}
5466

5567
.center_text {
56-
color: #1a72eb;
68+
{{#html_loader.loader_main_color}}
69+
color: {{html_loader.loader_main_color}};
70+
{{/html_loader.loader_main_color}}
71+
{{^html_loader.loader_main_color}}
72+
color: #1a72eb;
73+
{{/html_loader.loader_main_color}}
5774
min-width: 7em;
5875
border-radius: 50%;
59-
background-color: white;
76+
{{#html_loader.loader_frame_color}}
77+
background-color: {{html_loader.loader_frame_color}};
78+
{{/html_loader.loader_frame_color}}
79+
{{^html_loader.loader_frame_color}}
80+
background-color: white;
81+
{{/html_loader.loader_frame_color}}
6082
text-align: center;
6183
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
6284
font-size: 3.5vh;
@@ -76,7 +98,12 @@
7698
}
7799

78100
.min_text {
79-
color: #1a72eb;
101+
{{#html_loader.loader_main_color}}
102+
color: {{html_loader.loader_main_color}};
103+
{{/html_loader.loader_main_color}}
104+
{{^html_loader.loader_main_color}}
105+
color: #1a72eb;
106+
{{/html_loader.loader_main_color}}
80107
text-align: center;
81108
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
82109
font-size: 2vh;
@@ -99,8 +126,25 @@
99126
}
100127

101128
.canvas-app-canvas {
102-
background-size: auto 100%;
129+
{{#html_loader.background_color}}
130+
background-color: {{html_loader.background_color}};
131+
{{/html_loader.background_color}}
132+
{{#html_loader.background_size}}
133+
background-size: {{html_loader.background_size}};
134+
{{/html_loader.background_size}}
103135
}
136+
137+
{{#html_loader.loader_main_color}}
138+
.canvas-app-progress-bar {
139+
background-color: {{html_loader.loader_main_color}};
140+
}
141+
{{/html_loader.loader_main_color}}
142+
143+
{{#html_loader.loader_additional_color}}
144+
.canvas-app-progress {
145+
background-color: {{html_loader.loader_additional_color}};
146+
}
147+
{{/html_loader.loader_additional_color}}
104148
</style>
105149
<script>
106150
(function (d) {

0 commit comments

Comments
 (0)