hugo-geekblog/layouts/shortcodes/progress.html

24 lines
658 B
HTML
Raw Normal View History

2022-08-31 08:15:13 +00:00
{{- $value := default 0 (.Get "value") -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
<div class="gblog-progress">
<div class="gblog-progress__label flex justify-between">
<div class="gblog-progress__label--name flex align-center">
{{ with $icon -}}
<svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
{{- end }}
{{ with $title }}<span>{{ . }}</span>{{ end }}
</div>
<div>{{ $value }}%</div>
</div>
<div class="gblog-progress__wrap">
<div
class="gblog-progress__bar"
data-percent="{{ $value }}"
style="width: {{ $value }}%;"
></div>
</div>
</div>