ワイズリマインダー

jQueryとCSS3でページ推移時にLoadingを表示する

jQueryとCSS3でページ推移時にエフェクトをかける
からの派生です

データ量の多いページを読み込む際に、
パックマン風のLoadingを表示させます。

DEMO

パックマン風の作り方

#pacman{
	width:10vw;
	height:10vw;
	position:relative;
}
#pacman,
#pacman::before,
#pacman::after{
	width:0;
	height:0;
	border-top:5vw solid #ee3;
	border-right:5vw solid transparent;
	border-bottom:5vw solid #ee3;
	border-left:5vw solid #ee3;
	border-radius:50%;
	z-index:1;
}
#pacman::before,
#pacman::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
}
#pacman::before{
	animation:closeBefore 0.5s linear infinite;
}
#pacman::after{
	animation:closeAfter 0.5s linear infinite;
}
@keyframes closeBefore{
	0%{ transform: rotate(0deg) }
	50%{ transform: rotate(45deg); }
	100%{ transform: rotate(0deg); }
}
@keyframes closeAfter{
	0%{ transform: rotate(0deg) }
	50%{ transform: rotate(-45deg); }
	100%{ transform: rotate(0deg); }
}

３つのパックマンを表示させ、
1つを時計回りに45度回転
1つを半時計回りに45度回転させることで
パクパク見せています

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。