diff options
| author | Dixsie Wolmers <dixsie@ibm.com> | 2020-10-06 22:43:49 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-10-14 01:41:57 +0300 |
| commit | 61c65effc18270d3da6148c970b30c26b1f7ebcc (patch) | |
| tree | 355b5794a5e16ad50f713c3af4ee429561790db9 /src | |
| parent | 64c20a5e6523215935553267e362a28ae5a59fdc (diff) | |
| download | webui-vue-61c65effc18270d3da6148c970b30c26b1f7ebcc.tar.xz | |
Add custom IBM progress loading bar
- Current out of the box bootstrap did not meet
IBM style guide
- Custom gradient and animation added to loading bar
to indicate progress
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I9d12c1709e7e344545a7ecfd211db0507fd40794
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Global/LoadingBar.vue | 4 | ||||
| -rw-r--r-- | src/env/assets/styles/_ibm.scss | 33 |
2 files changed, 34 insertions, 3 deletions
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue index 7490baa0..3f503c8b 100644 --- a/src/components/Global/LoadingBar.vue +++ b/src/components/Global/LoadingBar.vue @@ -1,6 +1,6 @@ <template> <transition name="fade"> - <b-progress v-if="!isLoadingComplete" height="0.4rem"> + <b-progress v-if="!isLoadingComplete"> <b-progress-bar striped animated @@ -79,7 +79,7 @@ export default { bottom: -0.4rem; opacity: 1; transition: opacity $duration--moderate-01 $standard-easing--productive; - + height: 0.4rem; &.fade-enter, &.fade-leave-to { opacity: 0; diff --git a/src/env/assets/styles/_ibm.scss b/src/env/assets/styles/_ibm.scss index bd2bc73a..68395511 100644 --- a/src/env/assets/styles/_ibm.scss +++ b/src/env/assets/styles/_ibm.scss @@ -51,4 +51,35 @@ $warning: $yellow; // Validation icons $enable-validation-icons: true; $form-feedback-icon-valid: none; -$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}' width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>");
\ No newline at end of file +$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}' width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>"); + +// Progress loading bar variables +$loading-color-0: #552de5; +$loading-color-50: $primary; +$loading-color-100: #2dbde5; + +// Progress loading bar gradient +.progress { + height: 0.8rem!important; +} +.progress-bar { + background: linear-gradient( + 90deg, + $loading-color-0, + $loading-color-50, + $loading-color-100 + ); + background-size: 200% 200%; + animation: gradient 3s $standard-easing--productive infinite; +} +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +}
\ No newline at end of file |