| kumaran.m | 3b4814a | 2020-05-01 19:48:54 +0530 | [diff] [blame] | 1 | /* |
| 2 | Copyright 2020 TATA ELXSI |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the 'License'); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | |
| 16 | Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in) |
| 17 | */ |
| 18 | @import '../../../assets/scss/mixins/mixin'; |
| 19 | @import '../../../assets/scss/variable'; |
| 20 | .loader-overlay { |
| 21 | -ms-opacity: 0.9; |
| 22 | @include background(null, $white, null, null, null); |
| 23 | @include position_value(absolute, 0, null, null, 0); |
| 24 | @include wh-value(100%, 100%); |
| 25 | opacity: 0.9; |
| 26 | vertical-align: middle; |
| 27 | z-index: 100000; |
| 28 | .loader-content { |
| 29 | @include wh-value(50%, null); |
| 30 | margin-left: auto; |
| 31 | margin-top: auto; |
| 32 | .loader-text { |
| 33 | color: $body-color; |
| 34 | } |
| 35 | } |
| 36 | .loader-center { |
| 37 | @include position_value(absolute, 50%, null, null, 50%); |
| 38 | @include flexbox(block, null, null, null, null, null); |
| 39 | -moz-transform: translate(-50%, -50%); |
| 40 | -ms-transform: translate(-50%, -50%); |
| 41 | -o-transform: translate(-50%, -50%); |
| 42 | -webkit-transform: translate(-50%, -50%); |
| 43 | transform: translate(-50%, -55%); |
| 44 | } |
| 45 | } |
| 46 | .loader, |
| 47 | .loader:after { |
| 48 | @include roundedCornersPercentage(50%); |
| 49 | @include wh-value(10em, 10em); |
| 50 | } |
| 51 | .loader { |
| 52 | @include font(null, 3px, null); |
| 53 | @include position_value(relative, null, null, null, null); |
| 54 | @include border(top, 2, solid, rgba(5, 76, 140, 0.28)); |
| 55 | @include border(right, 2, solid, rgba(5, 76, 140, 0.28)); |
| 56 | @include border(bottom, 2, solid, rgba(5, 76, 140, 0.28)); |
| 57 | @include border(left, 2, solid, $primary); |
| 58 | margin: 0 auto; |
| 59 | text-indent: -9999em; |
| 60 | -webkit-transform: translateZ(0); |
| 61 | -ms-transform: translateZ(0); |
| 62 | transform: translateZ(0); |
| 63 | -webkit-animation: load8 1.1s infinite linear; |
| 64 | animation: load8 1.1s infinite linear; |
| 65 | } |
| 66 | @-webkit-keyframes load8 { |
| 67 | 0% { |
| 68 | -webkit-transform: rotate(0deg); |
| 69 | transform: rotate(0deg); |
| 70 | } |
| 71 | 100% { |
| 72 | -webkit-transform: rotate(360deg); |
| 73 | transform: rotate(360deg); |
| 74 | } |
| 75 | } |
| 76 | @keyframes load8 { |
| 77 | 0% { |
| 78 | -webkit-transform: rotate(0deg); |
| 79 | transform: rotate(0deg); |
| 80 | } |
| 81 | 100% { |
| 82 | -webkit-transform: rotate(360deg); |
| 83 | transform: rotate(360deg); |
| 84 | } |
| 85 | } |
| 86 | @keyframes blink {50% { color: transparent }} |
| 87 | .loader__dot { animation: 1s blink infinite } |
| 88 | .loader__dot:nth-child(2) { animation-delay: 250ms } |
| 89 | .loader__dot:nth-child(3) { animation-delay: 500ms } |