// Licensed to the Apache Software Foundation (ASF) under one // or more contributor license agreements. See the NOTICE file // distributed with this work for additional information // regarding copyright ownership. The ASF licenses this file // to you under the Apache License, Version 2.0 (the // "License"); you may not use this file except in compliance // with the License. You may obtain a copy of the License at // http://www.apache.org/licenses/LICENSE-2.0 // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. /* loader.scss */ .fa-spin-custom { animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) transform: rotate(0deg); } 100% { //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) transform: rotate(359deg); } } @keyframes spin { 0% { //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) transform: rotate(0deg); } 100% { //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) transform: rotate(359deg); } } .contentLoading { position: absolute; background: rgba(247, 247, 247, 0.24); top: 0; right: 0; left: 0; z-index: 99; bottom: 0; display: none; } .fontLoader { top: 50%; left: 50%; position: absolute; display: none; } .fontLoader-relative { @extend .fontLoader; position: relative; left: 0%; text-align: center; } .initialLoading { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: url("../img/ring.gif") no-repeat; background-position: 50% 50%; background-size: 60px; } .tableOverlay { position: absolute; width: 100%; height: 100%; background: $gray; z-index: 99; display: none; opacity: 0.2; } .value-loader { height: 4px; width: 50%; position: relative; overflow: hidden; background-color: #ddd; } .value-loader:before { display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 4px; background-color: #2980b9; animation: value-loader 2s linear infinite; } @keyframes value-loader { from { left: -200px; width: 30%; } 50% { width: 30%; } 70% { width: 70%; } 80% { left: 50%; } 95% { left: 120%; } to { left: 100%; } } .searchTableLogoLoader { width: 20px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: placeHolderLoader; animation-name: placeHolderLoader; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 700px 10px; border-radius: 8px; outline: 1px #fff solid; outline-offset: -1px; } @keyframes placeHolderLoader { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .loader-row .fontLoader-relative { margin-top: 43px; } .module-loader { position: fixed; top: 0; height: 2px; z-index: 9999; background: repeating-linear-gradient(to right, $color_jungle_green_approx 0%, $color_havelock_blue_approx 50%, #38bb4e 100%); width: 100%; background-size: 200% auto; background-position: 0 100%; animation: moduleLoader 2s infinite; animation-fill-mode: forwards; animation-timing-function: linear; transition: all 2s linear; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.33s, opacity 0.33s linear; &.show-loader { opacity: 1; transition-delay: 0s; visibility: visible; } } @keyframes moduleLoader { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }