待ち時間のローディングサンプル３
今回の記事では可愛い系サイトに合いそうなローディングサンプルのご紹介です。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="sample3.css"> </head> <body> <div class="load-container load-animation"> <div class="loader"></div> </div> </body> </html>
@charset "utf-8"; .load-container { width: 200px; height: 200px; background: rgba(33, 150, 243, 1); position: absolute; } .loader { margin: calc((200px - 14px) / 2) auto; font-size: 14px; width: 14px; height: 14px; border-radius: 50%; position: relative; animation: load-animation 1.1s infinite ease; transform: translateZ(0); } @keyframes load-animation { 0%, 100% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 1.0), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.2), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.2), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.2), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.5), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.7), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.2), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.2), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.2), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.2), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.5), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 1.0), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.2), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.2), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.2), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.2), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 1.0), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.2), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.2), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.2), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.7), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 1.0), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.2), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.2), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.5), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.7), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 1.0), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.2), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.2), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.5), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.7), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 1.0), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2), 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2), 2.50em 0.00em 0em 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0em 0em rgba(255, 255, 255, 0.2), 0.00em 2.50em 0em 0em rgba(255, 255, 255, 0.2), -1.80em 1.80em 0em 0em rgba(255, 255, 255, 0.5), -2.60em 0.00em 0em 0em rgba(255, 255, 255, 0.7), -1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0); } }
