openmct/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed 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.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@include keyframes(rotation) {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

@mixin spinner($b: 5px) {
    @include keyframes(rotateCentered) {
        0%   { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); }
        100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); }
    }
    @include animation-name(rotateCentered);
    @include animation-duration(0.5s);
    @include animation-iteration-count(infinite);
    @include animation-timing-function(linear);
    border-style: solid;
    border-width: $b;
    @include border-radius(100%);
}


@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
    @include spinner($b);
    @include box-sizing(border-box);
    border-color: rgba($c, 0.25);
    border-top-color: rgba($c, 1.0);
    display: block;
    position: absolute;
    height: 0; width: 0;
    padding: 7%;
    left: 50%; top: 50%;
}

@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
	display: block;
	position: absolute;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-color: rgba($c, 0.25);
	border-top-color: rgba($c, 1.0);
	border-style: solid;
	border-width: $b;
	@include border-radius(100%);
}

.t-wait-spinner,
.wait-spinner {
	$d: 5%;
	@include wait-spinner(0.5em, $colorKey);
	top: 50%; left: 50%;
	height: auto; width: auto;
	padding: $d; // Will size object based on parent container WIDTH
	pointer-events: none;
	margin-top: $d / -1;
	margin-left: $d / -1;
	z-index: 2;
	&.inline {
		display: inline-block !important;
		margin-right: $interiorMargin;
		position: relative !important;
		vertical-align: middle;
	}
}

.l-wait-spinner-holder {
	pointer-events: none;
	position: absolute;
	&.align-left {
		.t-wait-spinner {
			left: 0;
			margin-left: 0;
		}
	}
	&.full-size {
		display: inline-block;
		height: 100%; width: 100%;
		.t-wait-spinner {
			top: 0;
			margin-top: 0;
			padding: 30%;
		}
	}
}


.treeview .wait-spinner {
	$d: 10px;
	@include wait-spinner(0.25em, $colorKey);
	height: $d; width: $d;
	margin: 0 !important;
	padding: 0 !important;
	top: 2px; left: 0;
}

.wait-spinner.sm {
	$d: 13px;
	@include wait-spinner(0.25em, $colorKey);
	height: $d; width: $d;
	margin-left: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	top: 0; left: 0;
}

.loading {
	// Can be applied to any block element with height and width
    pointer-events: none;
    &:before,
    &:after {
        content: '';
    }
	&:before {
        @include wait-spinner2(5px, $colorLoadingFg);
        z-index: 10;
	}
    &:after {
        @include absPosDefault();
        background: $colorLoadingBg;
        display: block;
        z-index: 9;
    }
    &.tree-item:before {
        padding: $menuLineH / 4;
        border-width: 2px;
    }

}