diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index aacc90185..d6ee4d5a4 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -10,6 +10,7 @@ import global from 'primevue/theme/aura/global'; import inplace from 'primevue/theme/aura/inplace'; import metergroup from 'primevue/theme/aura/metergroup'; import panel from 'primevue/theme/aura/panel'; +import progressbar from 'primevue/theme/aura/progressbar'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; import scrolltop from 'primevue/theme/aura/scrolltop'; import skeleton from 'primevue/theme/aura/skeleton'; @@ -137,6 +138,7 @@ export default { metergroup, inplace, panel, + progressbar, scrollpanel, scrolltop, skeleton, diff --git a/components/lib/theme/aura/progressbar/index.js b/components/lib/theme/aura/progressbar/index.js new file mode 100644 index 000000000..db0edef27 --- /dev/null +++ b/components/lib/theme/aura/progressbar/index.js @@ -0,0 +1,139 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.700}' + } + } + } + }, + css: ` +.p-progressbar { + position: relative; + overflow: hidden; + border: 0 none; + height: 1.25rem; + background: var(--p-progressbar-background); + border-radius: var(--p-rounded-base); +} + +.p-progressbar-value { + border: 0 none; + margin: 0; + background: var(--p-primary-color); +} + +.p-progressbar-label { + color: var(--p-primary-inverse-color); + line-height: 1.25rem; + font-size: .75rem; + font-weight: 600; +} + +.p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.p-progressbar-determinate .p-progressbar-label { + display: inline-flex; +} + +.p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; +} + +@-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +@keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +` +}; diff --git a/components/lib/theme/aura/progressbar/package.json b/components/lib/theme/aura/progressbar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/progressbar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}