Browse Source

feat(shortcodes): add hack progress bar component

provides ability to display progress bar and percentage complete
Josh Habdas 2 years ago
parent
commit
1933b45f6a
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 22 additions and 0 deletions
  1. 22
    0
      layouts/shortcodes/hackcss-progress.html

+ 22
- 0
layouts/shortcodes/hackcss-progress.html View File

@@ -0,0 +1,22 @@
1
+<!-- {{/*
2
+Basic usage:
3
+{{< hackcss-progress value="40" >}}
4
+{{< hackcss-progress value="30" showpercent="true" >}}
5
+{{< hackcss-progress value="70" showpercent="true" filltext="pemuatan" >}}
6
+*/}} -->
7
+
8
+{{ $show_percent := .Get "showpercent" }}
9
+{{ $fill_text := .Get "filltext" | default "Loading" }}
10
+{{ $value := .Get "value" }}
11
+
12
+{{ if eq $show_percent "true" }}
13
+  <div class="progress-bar progress-bar-show-percent">
14
+    {{ with $value }}
15
+      <div class="progress-bar-filled" style="width:{{ . }}%" data-filled="{{ $fill_text }} {{ . }}%"></div>
16
+    {{ end }}
17
+  </div>
18
+{{ else }}
19
+  <div class="progress-bar">
20
+    <div class="progress-bar-filled" style="width: {{ $value }}%"></div>
21
+  </div>
22
+{{ end }}

Loading…
Cancel
Save