[CSS]コピペで簡単に利用できる、シンプルでセンスのあるアニメーションが気持ちいいプリローダー
Post on:2017年12月20日
sponsors
円の軌跡に沿って、ドットだけをさまざまなアニメーションで動かしたシンプルでセンスのあるプリローダーを紹介します。
cubic-bezier()を使用した緩急のあるアニメーションは、タイミングをずらすことで、気持ちいい動きになっています。
Pure CSS Animated circular dot preloaders
デモページでは12種類のプリローダーがあり、ドットの数やアニメーションがそれぞれ異なります。
HTMLの基本構造は共通です。ドットの数によって、.dotのdiv要素が増減するだけです。
|
1 2 3 4 5 6 |
<div class="card card1"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> </div> </div> |
1つ目なので、CSSはアニメーション部分だけでなく、ボックスやドットなどのスタイルを含む全部を掲載しました。
2つ目以降はL.30-37を入れ替えるだけで、他はすべて共通で利用できます。
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.card { position: relative; width: 20vw; height: 20vw; margin-top: 4em; background: rgba(0, 0, 0, 0.9); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); transform: scale(1); transition: all 0.5s ease; } .card .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18vw; height: 18vw; } .card .loader .dot { position: absolute; top: 0; left: calc(50% - 0.5vw); width: 1vw; height: 1vw; border-radius: 50%; background: white; transform-origin: 50% 9vw; } .card1 .dot:nth-child(1) { animation: fullrotate 1s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card1 .dot:nth-child(2) { animation: fullrotate 1s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } @keyframes fullrotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
1 2 3 4 5 6 |
<div class="card card2"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 |
.card2 .dot:nth-child(1) { animation: fullrotate 1s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card2 .dot:nth-child(2) { animation: fullrotate 0.5s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 |
<div class="card card3"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 |
.card3 .dot:nth-child(1) { animation: fullrotate 1s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card3 .dot:nth-child(2) { animation: fullrotate 1s 0.5s infinite reverse; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 |
<div class="card card4"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 |
.card4 .dot:nth-child(1) { animation: fullrotate 1s 0s ease-in infinite; } .card4 .dot:nth-child(2) { animation: fullrotate 1s 0.5s ease-out infinite; } |
|
1 2 3 4 5 6 7 8 |
<div class="card card5"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card5 .dot:nth-child(1) { animation: fullrotate 1s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card5 .dot:nth-child(2) { animation: fullrotate 1s 0.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card5 .dot:nth-child(3) { animation: fullrotate 1s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card5 .dot:nth-child(4) { animation: fullrotate 1s 0.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 |
<div class="card card6"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card6 .dot:nth-child(1) { animation: fullrotate 1.75s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card6 .dot:nth-child(2) { animation: fullrotate 1.5s 0.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card6 .dot:nth-child(3) { animation: fullrotate 1.25s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card6 .dot:nth-child(4) { animation: fullrotate 1s 0.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 |
<div class="card card7"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card7 .dot:nth-child(1) { animation: fullrotate 1.75s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card7 .dot:nth-child(2) { animation: fullrotate 1.5s 0.25s infinite reverse; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card7 .dot:nth-child(3) { animation: fullrotate 1.25s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card7 .dot:nth-child(4) { animation: fullrotate 1s 0.75s infinite reverse; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 |
<div class="card card8"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card8 .dot:nth-child(1) { animation: fullrotate 1.5s 0s infinite; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } .card8 .dot:nth-child(2) { animation: fullrotate 1.5s 0s infinite; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); } .card8 .dot:nth-child(3) { animation: fullrotate 1.5s 0s infinite; animation-timing-function: cubic-bezier(0.7, 0, 0.5, 1); } .card8 .dot:nth-child(4) { animation: fullrotate 1.5s 0s infinite; animation-timing-function: cubic-bezier(0.8, 0, 0.6, 1); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="card card9"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
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 32 |
.card9 .dot:nth-child(1) { animation: fullrotate 1s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(2) { animation: fullrotate 1s 0.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(3) { animation: fullrotate 1s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(4) { animation: fullrotate 1s 0.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(5) { animation: fullrotate 1s 1s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(6) { animation: fullrotate 1s 1.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(7) { animation: fullrotate 1s 1.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card9 .dot:nth-child(8) { animation: fullrotate 1s 1.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="card card10"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
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 32 |
.card10 .dot:nth-child(1) { animation: fullrotate 2.75s 0s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(2) { animation: fullrotate 2.5s 0.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(3) { animation: fullrotate 2.25s 0.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(4) { animation: fullrotate 2s 0.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(5) { animation: fullrotate 1.75s 1s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(6) { animation: fullrotate 1.5s 1.25s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(7) { animation: fullrotate 1.25s 1.5s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } .card10 .dot:nth-child(8) { animation: fullrotate 1s 1.75s infinite; animation-timing-function: cubic-bezier(0.75, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="card card11"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
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 32 |
.card11 .dot:nth-child(1) { animation: fullrotate 2.5s 0s infinite; animation-timing-function: cubic-bezier(0.8, 0, 0.3, 1); } .card11 .dot:nth-child(2) { animation: fullrotate 2.5s 0s infinite reverse; animation-timing-function: cubic-bezier(0.8, 0, 0.3, 1); } body .card11 .dot:nth-child(3) { animation: fullrotate 2.5s 0s infinite; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } body .card11 .dot:nth-child(4) { animation: fullrotate 2.5s 0s infinite reverse; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .card11 .dot:nth-child(5) { animation: fullrotate 2.5s 0s infinite; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); } body .card11 .dot:nth-child(6) { animation: fullrotate 2.5s 0s infinite reverse; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); } .card11 .dot:nth-child(7) { animation: fullrotate 2.5s 0s infinite; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } .card11 .dot:nth-child(8) { animation: fullrotate 2.5s 0s infinite reverse; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="card card12"> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> |
|
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 32 |
.card12 .dot:nth-child(1) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.1, 0, 0.8, 1); } body .card12 .dot:nth-child(2) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.2, 0, 0.7, 1); } .card12 .dot:nth-child(3) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } body .card12 .dot:nth-child(4) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1); } .card12 .dot:nth-child(5) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1); } .card12 .dot:nth-child(6) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); } .card12 .dot:nth-child(7) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } .card12 .dot:nth-child(8) { animation: fullrotate 2s 0s infinite; animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } |
sponsors
