待ち時間のローディングサンプル2
何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="sample2.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 - 100px) / 2) auto;/* (parent width - width) / 2 */ width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(to right, white 10%, transparent 42%); animation: load-animation 1.4s infinite linear; transform: translateZ(0); } .loader:before { width: 50%; height: 50%; background: white; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .loader:after { background: rgba(33, 150, 243, 1); width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @keyframes load-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }