Spaces:
Running
Running
/*! ------------------------------------------------ | |
* Project Name: Name: Ignite - Coming Soon and Landing Page Template | |
* Project Description: Ignite - functional and beautifully designed coming soon and landing page template to kick-start your project | |
* Tags: mix_design, coming soon, under construction, template, landing page, portfolio, one page, responsive, html5, css3, creative, clean, agency, personal page | |
* Version: 1.0.1 | |
* Build Date: May 2023 | |
* Last Update: January 2024 | |
* This product is available exclusively on Themeforest | |
* Author: mix_design | |
* Author URI: https://themeforest.net/user/mix_design */ | |
/*! File name: loader.css | |
* ------------------------------------------------ | |
* | |
* ------------------------------------------------ | |
* Table of Contents | |
* ------------------------------------------------ | |
* 1. Loader Styles | |
* ------------------------------------------------ | |
* Table of Contents End | |
* ------------------------------------------------ */ | |
/* ------------------------------------------------*/ | |
/* Loader Styles Start */ | |
/* ------------------------------------------------*/ | |
.loader { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 9999; | |
background-color: #0c0c0c; | |
opacity: 1; | |
visibility: visible; | |
-webkit-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
.loader.loaded { | |
opacity: 0; | |
visibility: hidden; | |
} | |
.loader__content { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
bottom: auto; | |
right: auto; | |
-webkit-transform: translateX(-50%) translateY(-50%); | |
-moz-transform: translateX(-50%) translateY(-50%); | |
-ms-transform: translateX(-50%) translateY(-50%); | |
transform: translateX(-50%) translateY(-50%); | |
} | |
.loader__logo { | |
width: 100px; | |
} | |
.loader__logo img { | |
display: block; | |
width: 100%; | |
height: auto; | |
} | |
@-webkit-keyframes scaleOut { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: scale3d(1.14, 1.14, 1.14); | |
transform: scale3d(1.14, 1.14, 1.14); | |
opacity: 0; | |
} | |
} | |
@-moz-keyframes scaleOut { | |
from { | |
-moz-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
opacity: 1; | |
} | |
to { | |
-moz-transform: scale3d(1.14, 1.14, 1.14); | |
transform: scale3d(1.14, 1.14, 1.14); | |
opacity: 0; | |
} | |
} | |
@keyframes scaleOut { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
-moz-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: scale3d(1.14, 1.14, 1.14); | |
-moz-transform: scale3d(1.14, 1.14, 1.14); | |
transform: scale3d(1.14, 1.14, 1.14); | |
opacity: 0; | |
} | |
} | |
.scaleOut { | |
-webkit-animation: scaleOut 0.3s 1; | |
-moz-animation: scaleOut 0.3s 1; | |
animation: scaleOut 0.3s 1; | |
-webkit-animation-fill-mode: both; | |
-moz-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
/* ------------------------------------------------*/ | |
/* Loader Styles End */ | |
/* ------------------------------------------------*/ |