MicroAd Compass Wipe_Banner - PC/SP-header部、PC/SP-body部セットで設置 - 外部HTML

CSS だけで作るローディング画像 ⑤
= Type 23 =
= 画像ファイルを用意する必要がありません =
  フリーで使えるローディング画像 -《総目次》
 CSS ⑤ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
《14》
《15》
《16》
《17》
《18》
《19》
《20》
《21》
《22》
《23》
《24》
《25》
《26》
《27》
《28》
《29》
《30》
《31》
スピード    
サイズ    
人気度    
透過処理    
SVG    
WebFont    
CSS①    
CSS②    
CSS③    
CSS④    
CSS⑤    
CSS⑥ 
  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
    ＊カラーサンプルはこちらが便利です。
  • 大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。
《 Type 23 - Circular Square 》
■ HTML ソース  Copy HTMLソース
<div id="preloader_2"><span></span><span></span><span></span><span></span></div>
■ CSS ソース  Copy CSSソース
#preloader_2{
width: 40px;
height: 40px;
margin: 0 auto;
position:relative;
}
#preloader_2 span{
	display:block;
	bottom:0px;
	width: 20px;
	height: 20px;
	background:#9b59b6;
	position:absolute;
}
#preloader_2 span:nth-child(1){
-webkit-animation: preloader_2_1 1.5s infinite ease-in-out;
-moz-animation: preloader_2_1 1.5s infinite ease-in-out;
-ms-animation: preloader_2_1 1.5s infinite ease-in-out;
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
-webkit-animation: preloader_2_2 1.5s infinite ease-in-out;
-moz-animation: preloader_2_2 1.5s infinite ease-in-out;
-ms-animation: preloader_2_2 1.5s infinite ease-in-out;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
-webkit-animation: preloader_2_3 1.5s infinite ease-in-out;
-moz-animation: preloader_2_3 1.5s infinite ease-in-out;
-ms-animation: preloader_2_3 1.5s infinite ease-in-out;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
-webkit-animation: preloader_2_4 1.5s infinite ease-in-out;
-moz-animation: preloader_2_4 1.5s infinite ease-in-out;
-ms-animation: preloader_2_4 1.5s infinite ease-in-out;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
@-webkit-keyframes preloader_2_1 {
    0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
	border-radius:20px;background:#3498db;}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-webkit-keyframes preloader_2_2 {
    0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);
	border-radius:20px;background:#f1c40f;}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-webkit-keyframes preloader_2_3 {
    0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg);
	border-radius:20px;background:#2ecc71;}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-webkit-keyframes preloader_2_4 {
    0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg);
	border-radius:20px;background:#e74c3c;}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_1 {
    0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
	border-radius:20px;background:#3498db;}
    80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes preloader_2_2 {
    0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);
	border-radius:20px;background:#f1c40f;}
    80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_3 {
    0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg);
	border-radius:20px;background:#2ecc71;}
    80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes preloader_2_4 {
    0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg);
	border-radius:20px;background:#e74c3c;}
    80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_1 {
    0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
	border-radius:20px;background:#3498db;}
    80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes preloader_2_2 {
    0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);
	border-radius:20px;background:#f1c40f;}
    80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_3 {
    0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg);
	border-radius:20px;background:#2ecc71;}
    80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes preloader_2_4 {
    0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg);
	border-radius:20px;background:#e74c3c;}
    80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
	border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);
	border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg);
	border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg);
	border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
■ GitHubで表示
GitHub  
スポンサーリンク
  フリーで使えるローディング画像 -《総目次》
スピード 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
サイズ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
人気度 
《1 背景：白／画像：黒》
《2 背景：黒／画像：白》
《3 背景：グレー／画像：黒》
《4 背景：グレー／画像：赤》
《5 背景：白／画像：赤》
《6 背景：黒／画像：赤》
《7 背景：白／画像：オレンジ》
《8 背景：白／画像：グリーン》
透過処理 
《1》
《2》
《3 - 星座記号》
《4》
《5》
《6》
《7》
《8》
SVG画像 
 透過処理済みSVGローダー（サイズ変更は幅の設定のみ）
Web Font
 Webフォントで作るローディング画像
CSS ① 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
CSS ② 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
CSS ③ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
《14》
《15》
《16》
《17》
《18》
《19》
《20》
《21》
《22》
《23》
《24》
《25》
《26》
《27》
《28》
CSS ④ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
《14》
《15》
《16》
《17》
《18》
《19》
《20》
CSS ⑤ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
《14》
《15》
《16》
《17》
《18》
《19》
《20》
《21》
《22》
《23》
《24》
《25》
《26》
《27》
《28》
《29》
《30》
《31》
CSS ⑥ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
CSS ⑦ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
スポンサーリンク
スポンサーリンク

おすすめサイト・関連サイト…

スポンサーリンク
Last updated : 2024/06/30
 Copied ! 
 Click to Copy 
© みんなの知識 ちょっと便利帳 - https://www.benricho.org/loading_images/withCSS_05/23.html