0
私のウェブサイトのプリローダーのページを作成しようとしていますが、javascriptで設定する方法がわかりません。すべてのCSSを作成しましたが、ローダをページに追加します。私はこれを見つけたが、私は自分のページにこれを適応する方法を知りませんJavaScriptがプリローダーのページを作成する
.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}
#cerchiodentro,#loading #cherchiodentro
{
\t display:block;
\t position:absolute;
\t margin:20px 0 0 20px;
\t
\t width:40px;
\t height:40px;
\t border-top:7px solid #f22121;
\t border-bottom:7px solid #f22121;
\t border-left:7px solid transparent;
\t border-right:7px solid transparent;
\t
\t border-radius:40px;
\t -moz-border-radius:40px;
\t -webkit-border-radius:40px;
\t -ms-border-radius:40px;
\t -o-border-radius:40px;
\t
\t box-shadow:0 0 20px #f22121;
\t -webkit-box-shadow:0 0 20px #f22121;
\t -moz-box-shadow:0 0 20px #f22121;
\t -ms-box-shadow:0 0 20px #f22121;
\t -o-box-shadow:0 0 20px #f22121;
\t
\t -webkit-animation: ccwSpin .555s linear .2s infinite;
\t -moz-animation: ccwSpin .555s linear .2s infinite;
\t -o-animation: ccwSpin .555s linear .2s infinite;
\t -ms-animation: ccwSpin .555s linear .2s infinite;
\t animation: ccwSpin .555s linear .2s infinite;
}
#loading #cerchiofuori
{
\t display:block;
\t position:absolute;
\t margin:0 auto;
\t width:80px;
\t height:80px;
\t border-top:7px solid #f22121;
\t border-bottom:7px solid transparent;
\t border-left:7px solid transparent;
\t border-right:7px solid 06F;
\t
\t border-radius:80px;
\t -moz-border-radius:80px;
\t -webkit-border-radius:80px;
\t -ms-border-radius:80px;
\t -o-border-radius:80px;
\t
\t -webkit-animation: cwSpin 1s linear .2s infinite;
\t -moz-animation: cwSpin .666s linear .2s infinite;
\t -o-animation: cwSpin .666s linear .2s infinite;
\t -ms-animation: cwSpin .666s linear .2s infinite;
\t animation: cwSpin .666s linear .2s infinite;
}
#loading #cerchiodentro
{
\t
\t border-top:7px solid transparent;
\t border-bottom:7px solid #f22121;
\t border-left:7px solid #f22121;
\t border-right:7px solid transparent;
\t
\t box-shadow:none;
\t -moz-box-shadow:none;
\t -ms-box-shadow:none;
\t -o-box-shadow:none;
\t -webkit-box-shadow:none;
}
@-webkit-keyframes cwSpin
{
\t 0%{-webkit-transform:rotate(0deg); \t }
\t 100%{-webkit-transform:rotate(360deg); }
}
@-moz-keyframes cwSpin
{
\t 0%{-moz-transform:rotate(0deg); \t }
\t 100%{-moz-transform:rotate(360deg); }
}
@-ms-keyframes cwSpin
{
\t 0%{-ms-transform:rotate(0deg); \t }
\t 100%{-ms-transform:rotate(360deg); }
}
@-o-keyframes cwSpin
{
\t 0%{-o-transform:rotate(0deg); \t }
\t 100%{-o-transform:rotate(360deg); }
}
@keyframes cwSpin
{
\t 0%{transform:rotate(0deg); \t }
\t 100%{transform:rotate(360deg); }
}
@-webkit-keyframes ccwSpin
{
\t 0%{-webkit-transform:rotate(0deg); \t }
\t 100%{-webkit-transform:rotate(-360deg); }
}
@-moz-keyframes ccwSpin
{
\t 0%{-moz-transform:rotate(0deg); \t }
\t 100%{-moz-transform:rotate(-360deg); }
}
@-ms-keyframes ccwSpin
{
\t 0%{-ms-transform:rotate(0deg); \t }
\t 100%{-ms-transform:rotate(-360deg); }
}
@-o-keyframes ccwSpin
{
\t 0%{-o-transform:rotate(0deg); \t }
\t 100%{-o-transform:rotate(-360deg); }
}
@keyframes ccwSpin
{
\t 0%{transform:rotate(0deg); \t }
\t 100%{transform:rotate(-360deg); }
}<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>、いくつかのいずれかが私を助けてくださいことができますか？
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});
^^^このコードは間違っているが、これは私はあなたが3秒後setTimeout()でローダーを非表示にする$('.caricamento').hide()を使用することができ、すべての答え
あなたは、 "プリローダー" とはどういう意味ですか？ – guest271314
私はあなたにリンクを与える：https://ihatetomatoes.net/demos/css3-preloader-transition/ アニメーションは、ページを開くとき – Lafa