CSS
【CSS】CSSのみで作られたCSSローディングスピナーコレクションCSS Only Loaders
April 29, 2017

CSS Only LoadersはCSSのみで作られたCSSローディングスピナーのコレクションです。
HTML
<div class="solar-container"> <div class="sun"></div> <div class="planet1Y"></div> <div class="planet2Y"></div> </div>
CSS
.solar-container { margin:0px auto 0px auto; width:100px; height:100px; position:relative; text-align:center; -webkit-animation: solar-rot 12s infinite linear; -moz-animation: solar-rot 12s infinite linear; -ms-animation: solar-rot 12s infinite linear; -o-animation: solar-rot 12s infinite linear; animation: solar-rot 12s infinite linear } .planet1Y { width:40px; height:40px; background-color:#E74C3C; top:50px; left:30px; z-index: 3; display:inline-block; position:absolute; border-radius:100%; -webkit-animation:planet1anim 3s infinite linear; -moz-animation:planet1anim 3s infinite linear; -ms-animation:planet1anim 3s infinite linear; -o-animation:planet1anim 3s infinite linear; animation:planet1anim 3s infinite linear; } .planet2Y { width:40px; height:40px; background-color:#1abc9c; top:50px; left:30px; z-index: 3; display:inline-block; position:absolute; border-radius:100%; -webkit-animation:planet2anim 3s infinite linear; -moz-animation:planet2anim 3s infinite linear; -ms-animation:planet2anim 3s infinite linear; -o-animation:planet2anim 3s infinite linear; animation:planet2anim 3s infinite linear; } .sun { width:40px; height:40px; display:inline-block; position:absolute; border-radius:100%; background-color:#F1C40F; top:30px; left: 30px; z-index: 2; } @-webkit-keyframes solar-rot { 100% { -webkit-transform:rotate(360deg) } } @keyframes solar-rot { 100% { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg) } } @-webkit-keyframes planet1anim { 0%,100% { -webkit-transform:scale(0.8) translateY(-20px); z-index:3; } 25% { -webkit-transform:scale(0.5) translateY(50px); z-index:1; } 50% { -webkit-transform:scale(0.3) translateY(-40px); z-index:1; } 75% { -webkit-transform:scale(0.5) translateY(-130px); z-index:1; } } @-webkit-keyframes planet2anim { 0%,100% { -webkit-transform:scale(0.3) translateY(-20px); z-index:1; } 25% { -webkit-transform:scale(0.5) translateY(-130px); z-index:1; } 50% { -webkit-transform:scale(0.8) translateY(-40px); z-index:3; } 75% { -webkit-transform:scale(0.5) translateY(50px); z-index:1; } } @keyframes planet1anim { 0%,100% { -webkit-transform:scale(0.8) translateY(-20px); z-index:3; -moz-transform:scale(0.8) translateY(-20px); z-index:3; -ms-transform:scale(0.8) translateY(-20px); z-index:3; -o-transform:scale(0.8) translateY(-20px); z-index:3; transform:scale(0.8) translateY(-20px); z-index:3; } 25% { -webkit-transform:scale(0.5) translateY(50px); z-index:1; -moz-transform:scale(0.5) translateY(50px); z-index:1; -ms-transform:scale(0.5) translateY(50px); z-index:1; -o-transform:scale(0.5) translateY(50px); z-index:1; transform:scale(0.5) translateY(50px); z-index:1; } 50% { -webkit-transform:scale(0.3) translateY(-40px); z-index:1; -moz-transform:scale(0.3) translateY(-40px); z-index:1; -ms-transform:scale(0.3) translateY(-40px); z-index:1; -o-transform:scale(0.3) translateY(-40px); z-index:1; transform:scale(0.3) translateY(-40px); z-index:1; } 75% { -webkit-transform:scale(0.5) translateY(-130px); z-index:1; -moz-transform:scale(0.5) translateY(-130px); z-index:1; -ms-transform:scale(0.5) translateY(-130px); z-index:1; -o-transform:scale(0.5) translateY(-130px); z-index:1; transform:scale(0.5) translateY(-130px); z-index:1; } } @keyframes planet2anim { 0%,100% { -webkit-transform:scale(0.3) translateY(-20px); z-index:1; -moz-transform:scale(0.3) translateY(-20px); z-index:1; -ms-transform:scale(0.3) translateY(-20px); z-index:1; -o-transform:scale(0.3) translateY(-20px); z-index:1; transform:scale(0.3) translateY(-20px); z-index:1; } 25% { -webkit-transform:scale(0.5) translateY(-130px); z-index:1; -moz-transform:scale(0.5) translateY(-130px); z-index:1; -ms-transform:scale(0.5) translateY(-130px); z-index:1; -o-transform:scale(0.5) translateY(-130px); z-index:1; transform:scale(0.5) translateY(-130px); z-index:1; } 50% { -webkit-transform:scale(0.8) translateY(-40px); z-index:3; -moz-transform:scale(0.8) translateY(-40px); z-index:3; -ms-transform:scale(0.8) translateY(-40px); z-index:3; -o-transform:scale(0.8) translateY(-40px); z-index:3; transform:scale(0.8) translateY(-40px); z-index:3; } 75% { -webkit-transform:scale(0.5) translateY(50px); z-index:1; -moz-transform:scale(0.5) translateY(50px); z-index:1; -ms-transform:scale(0.5) translateY(50px); z-index:1; -o-transform:scale(0.5) translateY(50px); z-index:1; transform:scale(0.5) translateY(50px); z-index:1; } } @-webkit-keyframes rotate { 100%{-webkit-transform:rotate(360deg)} } @keyframes rotate{ 100% { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg)} } @-webkit-keyframes bounce { 0%,100%{-webkit-transform:scale(0)} 50%{-webkit-transform:scale(1)} }
MIT