diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components/_loader.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/components/_loader.scss | 312 |
1 files changed, 156 insertions, 156 deletions
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss index ddff9af6e3..ee7f6f372d 100644 --- a/openecomp-ui/resources/scss/components/_loader.scss +++ b/openecomp-ui/resources/scss/components/_loader.scss @@ -1,159 +1,159 @@ .onboarding-loader { - .onboarding-loader-backdrop { - top: 0; - right: 0; - bottom: 0; - left: 0; - position: absolute; - background-color: #E1E4E6; - opacity: 0.5; - } - .tlv-loader { - height: 63px; - width: 63px; - position: absolute; - top: 30%; - left: 50%; - margin-top: -10.5px; - margin-left: -10.5px; - } - .tlv-loader.large { - transform: scale(1); - } - .tlv-loader::before { - background-color: $gray; - border-radius: 50%; - box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray; - content: ''; - display: block; - height: 21px; - width: 21px; - position: absolute; - left: 50%; - margin-left: -10.5px; - } - .tlv-loader::after { - border-radius: 50%; - content: ''; - display: block; - position: absolute; - height: 21px; - width: 21px; - animation: dot-move-2 4.5s infinite ease-in; - } - @keyframes dot-move { - 0% { - background-color: $blue; - left: 21px; - top: 0; + .onboarding-loader-backdrop { + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: $loader-background; + opacity: 0.5; + } + .tlv-loader { + height: 63px; + width: 63px; + position: absolute; + top: 30%; + left: 50%; + margin-top: -10.5px; + margin-left: -10.5px; + } + .tlv-loader.large { + transform: scale(1); + } + .tlv-loader::before { + background-color: $gray; + border-radius: 50%; + box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, + -21px 21px 0px 0px $gray; + content: ''; + display: block; + height: 21px; + width: 21px; + position: absolute; + left: 50%; + margin-left: -10.5px; + } + .tlv-loader::after { + border-radius: 50%; + content: ''; + display: block; + position: absolute; + height: 21px; + width: 21px; + animation: dot-move-2 4.5s infinite ease-in; + } + @keyframes dot-move { + 0% { + background-color: $blue; + left: 21px; + top: 0; + } + 25% { + background-color: $orange; + left: 42px; + top: 21px; + } + 50% { + background-color: $light-purple; + left: 21px; + top: 42px; + } + 75% { + background-color: $light-green; + left: 0; + top: 21px; + } + 100% { + background-color: $blue; + left: 21px; + top: 0; + } + } + @keyframes dot-move-2 { + 0% { + background-color: $blue; + left: 21px; + top: 0; + } + 6.25% { + background-color: $blue; + left: 42px; + top: 21px; + } + 12.5% { + background-color: $blue; + left: 21px; + top: 42px; + } + 18.75% { + background-color: $blue; + left: 0; + top: 21px; + } + 25% { + background-color: $orange; + left: 21px; + top: 0; + } + 31.25% { + background-color: $orange; + left: 42px; + top: 21px; + } + 37.5% { + background-color: $orange; + left: 21px; + top: 42px; + } + 43.75% { + background-color: $orange; + left: 0; + top: 21px; + } + 50% { + background-color: $light-purple; + left: 21px; + top: 0; + } + 56.25% { + background-color: $light-purple; + left: 42px; + top: 21px; + } + 62.5% { + background-color: $light-purple; + left: 21px; + top: 42px; + } + 68.75% { + background-color: $light-purple; + left: 0; + top: 21px; + } + 75% { + background-color: $light-green; + left: 21px; + top: 0; + } + 81.25% { + background-color: $light-green; + left: 42px; + top: 21px; + } + 87.5% { + background-color: $light-green; + left: 21px; + top: 42px; + } + 93.75% { + background-color: $light-green; + left: 0; + top: 21px; + } + 100% { + background-color: $blue; + left: 21px; + top: 0; + } } - 25% { - background-color: $orange; - left: 42px; - top: 21px; - } - 50% { - background-color: $light-purple; - left: 21px; - top: 42px; - } - 75% { - background-color: $light-green; - left: 0; - top: 21px; - } - 100% { - background-color: $blue; - left: 21px; - top: 0; - } - } - @keyframes dot-move-2 { - 0% { - background-color: $blue; - left: 21px; - top: 0; - } - 6.25% { - background-color: $blue; - left: 42px; - top: 21px; - } - 12.5% { - background-color: $blue; - left: 21px; - top: 42px; - } - 18.75% { - background-color: $blue; - left: 0; - top: 21px; - } - 25% { - background-color: $orange; - left: 21px; - top: 0; - } - 31.25% { - background-color: $orange; - left: 42px; - top: 21px; - } - 37.5% { - background-color: $orange; - left: 21px; - top: 42px; - } - 43.75% { - background-color: $orange; - left: 0; - top: 21px; - } - 50% { - background-color: $light-purple; - left: 21px; - top: 0; - } - 56.25% { - background-color: $light-purple; - left: 42px; - top: 21px; - } - 62.5% { - background-color: $light-purple; - left: 21px; - top: 42px; - } - 68.75% { - background-color: $light-purple; - left: 0; - top: 21px; - } - 75% { - background-color: $light-green; - left: 21px; - top: 0; - } - 81.25% { - background-color: $light-green; - left: 42px; - top: 21px; - } - 87.5% { - background-color: $light-green; - left: 21px; - top: 42px; - } - 93.75% { - background-color: $light-green; - left: 0; - top: 21px; - } - 100% { - background-color: $blue; - left: 21px; - top: 0; - } - } } - |