compose-preview Material 3 Design Kit

Loading & progress

12 of 86 components implemented · Open in Figma

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets
Wave height=12, Thickness=4, Wavelength=40 — no code behind this Wave height=12, Thickness=4, Wavelength=20 — no code behind this Wave height=12, Thickness=8, Wavelength=40 — no code behind this Wave height=12, Thickness=8, Wavelength=20 — no code behind this Type=Flat, Thickness=4 dp, Progress=0 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=4 dp, Progress=10 — no code behind this Type=Flat, Thickness=4 dp, Progress=20 — no code behind this Type=Flat, Thickness=4 dp, Progress=50 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=4 dp, Progress=80 — no code behind this Type=Flat, Thickness=4 dp, Progress=100 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=8 dp, Progress=0 — no code behind this Type=Flat, Thickness=8 dp, Progress=10 — no code behind this Type=Flat, Thickness=8 dp, Progress=20 — no code behind this Type=Flat, Thickness=8 dp, Progress=50 — no code behind this Type=Flat, Thickness=8 dp, Progress=80 — no code behind this Type=Flat, Thickness=8 dp, Progress=100 — no code behind this Type=Wave, Thickness=4 dp, Progress=0 — no code behind this Type=Wave, Thickness=4 dp, Progress=10 — no code behind this Type=Wave, Thickness=4 dp, Progress=20 — no code behind this Type=Wave, Thickness=4 dp, Progress=50 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearWavyProgress Type=Wave, Thickness=4 dp, Progress=80 — no code behind this Type=Wave, Thickness=4 dp, Progress=100 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearWavyProgress Type=Wave, Thickness=8 dp, Progress=0 — no code behind this Type=Wave, Thickness=8 dp, Progress=10 — no code behind this Type=Wave, Thickness=8 dp, Progress=20 — no code behind this Type=Wave, Thickness=8 dp, Progress=50 — no code behind this Type=Wave, Thickness=8 dp, Progress=80 — no code behind this Type=Wave, Thickness=8 dp, Progress=100 — no code behind this Type=Flat, Thickness=4 dp, Step=0 — no code behind this Type=Flat, Thickness=4 dp, Step=1 — no code behind this Type=Flat, Thickness=4 dp, Step=2 — no code behind this Type=Flat, Thickness=8 dp, Step=0 — no code behind this Type=Flat, Thickness=8 dp, Step=1 — no code behind this Type=Flat, Thickness=8 dp, Step=2 — no code behind this Type=Wave, Thickness=4 dp, Step=0 — no code behind this Type=Wave, Thickness=4 dp, Step=1 — no code behind this Type=Wave, Thickness=4 dp, Step=2 — no code behind this Type=Wave, Thickness=8 dp, Step=0 — no code behind this Type=Wave, Thickness=8 dp, Step=1 — no code behind this Type=Wave, Thickness=8 dp, Step=2 — no code behind this Type=Flat, Thickness=4 dp, Progress=0 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=0 — no code behind this Type=Wave, Thickness=4 dp, Progress=0 — no code behind this Type=Wave, Thickness=8 dp, Progress=0 — no code behind this Type=Flat, Thickness=4 dp, Progress=10 — no code behind this Type=Flat, Thickness=8 dp, Progress=10 — no code behind this Type=Wave, Thickness=4 dp, Progress=10 — no code behind this Type=Wave, Thickness=8 dp, Progress=10 — no code behind this Type=Flat, Thickness=4 dp, Progress=30 — no code behind this Type=Flat, Thickness=8 dp, Progress=30 — no code behind this Type=Wave, Thickness=4 dp, Progress=30 — no code behind this Type=Wave, Thickness=8 dp, Progress=30 — no code behind this Type=Flat, Thickness=4 dp, Progress=50 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=50 — no code behind this Type=Wave, Thickness=4 dp, Progress=50 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularWavyProgress Type=Wave, Thickness=8 dp, Progress=50 — no code behind this Type=Flat, Thickness=4 dp, Progress=80 — no code behind this Type=Flat, Thickness=8 dp, Progress=80 — no code behind this Type=Wave, Thickness=4 dp, Progress=80 — no code behind this Type=Wave, Thickness=8 dp, Progress=80 — no code behind this Type=Flat, Thickness=4 dp, Progress=100 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=100 — no code behind this Type=Wave, Thickness=4 dp, Progress=100 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularWavyProgress Type=Wave, Thickness=8 dp, Progress=100 — no code behind this Type=Flat, Thickness=4 dp, Step=1 — no code behind this Type=Flat, Thickness=8 dp, Step=1 — no code behind this Type=Wave, Thickness=4 dp, Step=1 — no code behind this Type=Wave, Thickness=8 dp, Step=1 — no code behind this Type=Flat, Thickness=4 dp, Step=2 — no code behind this Type=Flat, Thickness=8 dp, Step=2 — no code behind this Type=Wave, Thickness=4 dp, Step=2 — no code behind this Type=Wave, Thickness=8 dp, Step=2 — no code behind this Steps=1, Show container=False — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/LoadingIndicator.kt#LoadingIndicatorSticker Steps=1, Show container=True — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/LoadingIndicator.kt#ContainedLoadingIndicatorSticker Steps=2, Show container=False — no code behind this Steps=2, Show container=True — no code behind this Steps=3, Show container=False — no code behind this Steps=3, Show container=True — no code behind this Steps=4, Show container=False — no code behind this Steps=4, Show container=True — no code behind this Steps=5, Show container=False — no code behind this Steps=5, Show container=True — no code behind this Steps=6, Show container=False — no code behind this Steps=6, Show container=True — no code behind this Steps=7, Show container=False — no code behind this Steps=7, Show container=True — no code behind this
12 of 86 components implemented
Wave height=12, Thickness=4, Wavelength=40no code behind this Wave height=12, Thickness=4, Wavelength=20no code behind this Wave height=12, Thickness=8, Wavelength=40no code behind this Wave height=12, Thickness=8, Wavelength=20no code behind this Type=Flat, Thickness=4 dp, Progress=0catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=4 dp, Progress=10no code behind this Type=Flat, Thickness=4 dp, Progress=20no code behind this Type=Flat, Thickness=4 dp, Progress=50catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=4 dp, Progress=80no code behind this Type=Flat, Thickness=4 dp, Progress=100catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearProgress Type=Flat, Thickness=8 dp, Progress=0no code behind this Type=Flat, Thickness=8 dp, Progress=10no code behind this Type=Flat, Thickness=8 dp, Progress=20no code behind this Type=Flat, Thickness=8 dp, Progress=50no code behind this Type=Flat, Thickness=8 dp, Progress=80no code behind this Type=Flat, Thickness=8 dp, Progress=100no code behind this Type=Wave, Thickness=4 dp, Progress=0no code behind this Type=Wave, Thickness=4 dp, Progress=10no code behind this Type=Wave, Thickness=4 dp, Progress=20no code behind this Type=Wave, Thickness=4 dp, Progress=50catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearWavyProgress Type=Wave, Thickness=4 dp, Progress=80no code behind this Type=Wave, Thickness=4 dp, Progress=100catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#LinearWavyProgress Type=Wave, Thickness=8 dp, Progress=0no code behind this Type=Wave, Thickness=8 dp, Progress=10no code behind this Type=Wave, Thickness=8 dp, Progress=20no code behind this Type=Wave, Thickness=8 dp, Progress=50no code behind this Type=Wave, Thickness=8 dp, Progress=80no code behind this Type=Wave, Thickness=8 dp, Progress=100no code behind this Type=Flat, Thickness=4 dp, Step=0no code behind this Type=Flat, Thickness=4 dp, Step=1no code behind this Type=Flat, Thickness=4 dp, Step=2no code behind this Type=Flat, Thickness=8 dp, Step=0no code behind this Type=Flat, Thickness=8 dp, Step=1no code behind this Type=Flat, Thickness=8 dp, Step=2no code behind this Type=Wave, Thickness=4 dp, Step=0no code behind this Type=Wave, Thickness=4 dp, Step=1no code behind this Type=Wave, Thickness=4 dp, Step=2no code behind this Type=Wave, Thickness=8 dp, Step=0no code behind this Type=Wave, Thickness=8 dp, Step=1no code behind this Type=Wave, Thickness=8 dp, Step=2no code behind this Type=Flat, Thickness=4 dp, Progress=0catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=0no code behind this Type=Wave, Thickness=4 dp, Progress=0no code behind this Type=Wave, Thickness=8 dp, Progress=0no code behind this Type=Flat, Thickness=4 dp, Progress=10no code behind this Type=Flat, Thickness=8 dp, Progress=10no code behind this Type=Wave, Thickness=4 dp, Progress=10no code behind this Type=Wave, Thickness=8 dp, Progress=10no code behind this Type=Flat, Thickness=4 dp, Progress=30no code behind this Type=Flat, Thickness=8 dp, Progress=30no code behind this Type=Wave, Thickness=4 dp, Progress=30no code behind this Type=Wave, Thickness=8 dp, Progress=30no code behind this Type=Flat, Thickness=4 dp, Progress=50catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=50no code behind this Type=Wave, Thickness=4 dp, Progress=50catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularWavyProgress Type=Wave, Thickness=8 dp, Progress=50no code behind this Type=Flat, Thickness=4 dp, Progress=80no code behind this Type=Flat, Thickness=8 dp, Progress=80no code behind this Type=Wave, Thickness=4 dp, Progress=80no code behind this Type=Wave, Thickness=8 dp, Progress=80no code behind this Type=Flat, Thickness=4 dp, Progress=100catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularProgress Type=Flat, Thickness=8 dp, Progress=100no code behind this Type=Wave, Thickness=4 dp, Progress=100catalog/src/main/kotlin/ee/schimke/m3catalog/sections/ProgressIndicators.kt#CircularWavyProgress Type=Wave, Thickness=8 dp, Progress=100no code behind this Type=Flat, Thickness=4 dp, Step=1no code behind this Type=Flat, Thickness=8 dp, Step=1no code behind this Type=Wave, Thickness=4 dp, Step=1no code behind this Type=Wave, Thickness=8 dp, Step=1no code behind this Type=Flat, Thickness=4 dp, Step=2no code behind this Type=Flat, Thickness=8 dp, Step=2no code behind this Type=Wave, Thickness=4 dp, Step=2no code behind this Type=Wave, Thickness=8 dp, Step=2no code behind this Steps=1, Show container=Falsecatalog/src/main/kotlin/ee/schimke/m3catalog/sections/LoadingIndicator.kt#LoadingIndicatorSticker Steps=1, Show container=Truecatalog/src/main/kotlin/ee/schimke/m3catalog/sections/LoadingIndicator.kt#ContainedLoadingIndicatorSticker Steps=2, Show container=Falseno code behind this Steps=2, Show container=Trueno code behind this Steps=3, Show container=Falseno code behind this Steps=3, Show container=Trueno code behind this Steps=4, Show container=Falseno code behind this Steps=4, Show container=Trueno code behind this Steps=5, Show container=Falseno code behind this Steps=5, Show container=Trueno code behind this Steps=6, Show container=Falseno code behind this Steps=6, Show container=Trueno code behind this Steps=7, Show container=Falseno code behind this Steps=7, Show container=Trueno code behind this