Это мой код Preloader для моего веб-сайта.
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 0px solid white;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
@media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
@media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF">
</div>
<main id="site" role="main"></main>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
/*(function preloader() {
var preloader = document.getElementById("#preloader");
preloader.style.opacity = "0";
preloader.setAttribute("aria-busy", "false");
document.getElementById("#site").style.opacity = "1";
})
window.onload = preloader;*/
</script>
Сейчас у меня есть белый фон, я бы хотел, чтобы фон был чисто черным.Я попробовал несколько вещей, но, похоже, ничего не работает.
Я загружаю GIF из URL.
Я знаю, что цветовой код для черного - # 000000, и я попытался ввести еговместо opacity = 0; но, похоже, ничего не работает.
Любой совет?