summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_loader.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components/_loader.scss')
-rw-r--r--openecomp-ui/resources/scss/components/_loader.scss312
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;
- }
- }
}
-