Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Basic -->
<progress value="75" max="100" class="progress" aria-label="Loading progress"></progress>
<!-- With Label -->
<div class="flex flex-wrap i-full" style="gap: .75rem">
  <span class="text-sm font-medium" id="progress_label">Upload progress</span>
  <span class="text-sm text-subtle mis-auto">56%</span>
  <progress value="56" max="100" class="progress" aria-labelledby="progress_label"></progress>
</div>
<!-- Indeterminate -->
<progress class="progress" aria-label="Loading"></progress>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%# Basic %>
<%= tag.progress value: 75, max: 100, class: "progress", aria: { label: "Loading progress" } %>
<%# With Label %>
<div class="flex flex-wrap i-full" style="gap: .75rem">
  <span class="text-sm font-medium" id="progress_label">Upload progress</span>
  <span class="text-sm text-subtle mis-auto">56%</span>
  <%= tag.progress value: 56, max: 100, class: "progress", aria: { labelledby: "progress_label" } %>
</div>
<%# Indeterminate %>
<%= tag.progress class: "progress", aria: { label: "Loading" } %>
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
.progress {
  --progress-bar-color: var(--color-border-light);
  --progress-value-color: var(--color-primary);
  background-color: var(--progress-bar-color);
  block-size: var(--size-1);
  border-radius: var(--rounded-full);
  inline-size: var(--size-full);
  overflow: hidden;
  &:indeterminate {
    animation: progress-loading 2s linear infinite;
    background: linear-gradient(to right, var(--progress-bar-color) 45%, var(--progress-value-color) 0%, var(--progress-value-color) 55%, var(--progress-bar-color) 0%);
    background-position: right;
    background-size: 225% 100%;
  }
  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background-color: var(--progress-bar-color);
  }
  &::-webkit-progress-value {
    background-color: var(--progress-value-color);
  }
  &:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }
  /* Firefox */
  &::-moz-progress-bar {
    background-color: var(--progress-value-color);
  }
  &:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }
}
@keyframes progress-loading {
  50% {
    background-position: left;
  }
}
Java Script is not required or multiple files are needed, check the notes.

Install

bin/rails generate css_zero:add progress