84 lines
2.3 KiB
CSS
84 lines
2.3 KiB
CSS
/**
|
|
* Copyright 2021-2022 InPost S.A.
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* Licensed under the EUPL-1.2 or later.
|
|
* You may not use this work except in compliance with the Licence.
|
|
*
|
|
* You may obtain a copy of the Licence at:
|
|
* https://joinup.ec.europa.eu/software/page/eupl
|
|
* It is also bundled with this package in the file LICENSE.txt
|
|
*
|
|
* Unless required by applicable law or agreed to in writing,
|
|
* software distributed under the Licence is distributed on an AS IS basis,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the Licence for the specific language governing permissions
|
|
* and limitations under the Licence.
|
|
*
|
|
* @author InPost S.A.
|
|
* @copyright 2021-2022 InPost S.A.
|
|
* @license https://joinup.ec.europa.eu/software/page/eupl
|
|
*/
|
|
.inpost-loader-animation {
|
|
--block-size: 18vmin;
|
|
--loader-size-half: calc(var(--loader-size) / 2);
|
|
--loader-size-half-neg: calc(var(--loader-size-half) * -1);
|
|
--dot-size: 10px;
|
|
--dot-size-half: calc(var(--dot-size) / 2);
|
|
--dot-size-half-neg: calc(var(--dot-size-half) * -1);
|
|
--loader-size: calc(var(--block-size) / 3);
|
|
--anim-duration: 1.2s;
|
|
aspect-ratio: 1 / 1;
|
|
border: 1px solid rgba(0, 175, 240, 0.5);
|
|
border-radius: 50%;
|
|
animation: inpost-loader-animation calc(var(--anim-duration) * 3) linear infinite;
|
|
|
|
position: relative;
|
|
width: var(--loader-size);
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
}
|
|
|
|
.inpost-loader-animation::before,
|
|
.inpost-loader-animation::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: var(--dot-size);
|
|
aspect-ratio: 1 / 1;
|
|
background: #00aff0;
|
|
border-radius: 50%;
|
|
top: var(--dot-size-half-neg);
|
|
left: calc(50% - var(--dot-size-half));
|
|
animation: inpost-loader-animation var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
|
|
transform-origin: center calc(var(--loader-size-half) + var(--dot-size-half) - 1px);
|
|
}
|
|
|
|
.inpost-loader-animation::after {
|
|
animation-delay: calc(var(--anim-duration) / 3 * -1);
|
|
}
|
|
|
|
@keyframes inpost-loader-animation {
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
.inpost-loader{
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1051;
|
|
background-color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
.inpost-loader.active{
|
|
display: flex;
|
|
}
|