Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
<!-- Default -->
<label>
  <progress value="75" max="100" class="progress" role="progressbar"></progress>
  <span class="sr-only">Loading progress</span>
</label>
<!-- Indeterminate -->
<label>
  <progress indeterminate="indeterminate" class="progress" role="progressbar"></progress>
  <span class="sr-only">Loading progress</span>
</label>
1
2
3
4
5
6
7
8
9
10
11
<%# Default %>
<label>
  <%= tag.progress value: 75, max: 100, class: "progress", role: "progressbar" %>
  <span class="sr-only">Loading progress</span>
</label>
<%# Indeterminate %>
<label>
  <%= tag.progress indeterminate: true, class: "progress", role: "progressbar" %>
  <span class="sr-only">Loading progress</span>
</label>
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 {
  --track: var(--color-border-light);
  --progress: var(--color-primary);
  background-color: var(--track);
  border-radius: var(--rounded-full);
  block-size: var(--size-4);
  inline-size: var(--size-full);
  overflow: hidden;
  &:indeterminate {
    background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
    background-size: 225% 100%;
    background-position: right;
    animation: progress-loading 2s infinite ease;
  }
  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background-color: var(--track);
  }
  &::-webkit-progress-value {
    background-color: var(--progress);
  }
  &:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }
  /* Firefox */
  &::-moz-progress-bar {
    background-color: var(--progress);
  }
  &: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.

No notes provided.