Pemuat Elemen Tunggal: Menjadi 3D!

Untuk artikel keempat dan terakhir dari kami seri kecil pada pemuat elemen tunggal, kita akan menjelajahi pola 3D. Saat membuat elemen 3D, sulit untuk membayangkan bahwa satu elemen HTML saja sudah cukup untuk mensimulasikan sesuatu seperti keenam sisi kubus. Tapi mungkin kita bisa lolos dengan sesuatu yang lebih kubus-'like' sebagai gantinya dengan hanya menunjukkan tiga sisi depan bentuk — itu sangat mungkin dan itulah yang akan kita lakukan bersama.

Pemuat kubus split

Berikut adalah pemuat 3D di mana kubus dibagi menjadi dua bagian, tetapi hanya dibuat dengan satu elemen saja:

Setiap setengah kubus dibuat menggunakan elemen semu:

Keren, kan?! Kita dapat menggunakan gradien kerucut dengan CSS clip-path pada elemen ::before dan ::after pseudo untuk mensimulasikan tiga wajah kubus 3D yang terlihat. Margin negatif adalah apa yang menarik kedua pseudo bersama-sama untuk tumpang tindih dan mensimulasikan kubus penuh. Sisa pekerjaan kami sebagian besar menganimasikan kedua bagian itu untuk mendapatkan loader yang tampak rapi!

Mari kita lihat visual yang menjelaskan matematika di balik titik clip-path yang digunakan untuk membuat elemen seperti kubus ini:

Kami memiliki variabel dan persamaan, jadi mari kita terapkan. Pertama, kita akan membuat variabel kita dan mengatur ukuran untuk main .loader elemen:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Tidak ada yang terlalu gila sejauh ini. Kita punya sebuah 150px persegi yang diatur sebagai wadah fleksibel. Sekarang kita membangun pseudo kita:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Itu adalah dua bagian di .loader wadah. Kita perlu mengecatnya, jadi di situlah tempat kita gradien kerucut menendang:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Gradiennya ada, tapi terlihat aneh. Kita harus klip ke elemen:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Mari kita pastikan kedua bagian tumpang tindih dengan a margin negatif:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Sekarang mari kita buat mereka bergerak!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Berikut demo terakhir sekali lagi:

Pemuat kubus kemajuan

Mari gunakan teknik yang sama untuk membuat pemuat kemajuan 3D. Ya, masih hanya satu elemen!

Kami tidak mengubah apa pun sejauh mensimulasikan kubus dengan cara yang sama seperti yang kami lakukan sebelumnya, selain mengubah tinggi pemuat dan rasio aspek. Animasi yang kami buat bergantung pada teknik yang sangat mudah di mana kami memperbarui lebar sisi kiri sementara sisi kanan mengisi ruang yang tersisa, berkat flex-grow: 1.

Langkah pertama adalah menambahkan beberapa transparansi ke sisi kanan menggunakan opacity:

Ini mensimulasikan efek bahwa satu sisi kubus diisi sementara yang lain kosong. Kemudian kami memperbarui warna sisi kiri. Untuk melakukan itu, kita bisa memperbarui tiga warna di dalam gradien kerucut atau kita melakukannya dengan menambahkan warna latar belakang dengan a background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Trik ini hanya memungkinkan kita untuk memperbarui warna hanya sekali. Sisi kanan loader menyatu dengan tiga warna putih dari gradien kerucut untuk menciptakan tiga warna baru dari warna kita, meskipun kita hanya menggunakan satu nilai warna. Tipuan warna!

Mari kita menganimasikan lebar sisi kiri loader:

Ups, animasinya agak aneh di awal! Perhatikan bagaimana itu dimulai di luar kubus? Ini karena kami memulai animasi di 0% lebar. Tetapi karena clip-path dan margin negatif yang kita gunakan, yang perlu kita lakukan adalah mulai dari --_d variabel, yang kami gunakan untuk mendefinisikan clip-path poin dan margin negatif:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

Itu sedikit lebih baik:

Tapi kita bisa membuat animasi ini lebih halus. Apakah Anda memperhatikan bahwa kami kehilangan sesuatu? Mari saya tunjukkan tangkapan layar untuk membandingkan seperti apa demo terakhir dengan demo terakhir itu:

Ini adalah bagian bawah kubus! Karena elemen kedua transparan, kita perlu melihat permukaan bawah persegi panjang itu seperti yang Anda lihat di contoh kiri. Ini halus, tetapi harus ada di sana!

Kita dapat menambahkan gradien ke elemen utama dan memotongnya seperti yang kita lakukan dengan pseudo:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Berikut kode lengkapnya setelah semuanya disatukan:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

Itu dia! Kami baru saja menggunakan teknik pintar yang menggunakan elemen semu, gradien kerucut, kliping, pencampuran latar belakang, dan margin negatif untuk mendapatkan, bukan hanya satu, tetapi dua pemuat 3D yang tampak manis dengan tidak lebih dari satu elemen di markup.

Lebih 3D

Kita masih bisa melangkah lebih jauh dan mensimulasikan kubus 3D dalam jumlah tak terbatas menggunakan satu elemen — ya, itu mungkin! Berikut adalah kisi-kisi kubus:

Demo ini dan demo berikut tidak didukung di Safari pada saat penulisan.

Gila, kan? Sekarang kita sedang membuat pola kubus berulang yang dibuat menggunakan satu elemen… dan juga tanpa pseudo! Saya tidak akan menjelaskan secara rinci tentang matematika yang kami gunakan (ada angka yang sangat spesifik di sana) tetapi di sini ada gambar untuk memvisualisasikan bagaimana kami sampai di sini:

Kami pertama menggunakan conic-gradient untuk membuat pola kubus berulang. Pengulangan pola dikendalikan oleh tiga variabel:

• --size: Sesuai dengan namanya, ini mengontrol ukuran setiap kubus.
• --m: Ini mewakili jumlah kolom.
• --n: Ini adalah jumlah baris.
• --gap: ini jarak atau jarak antara kubus

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Kemudian kita menerapkan layer mask menggunakan pola lain yang memiliki ukuran yang sama. Ini adalah bagian tersulit dari ide ini. Menggunakan kombinasi linear-gradient dan conic-gradient kita akan memotong beberapa bagian dari elemen kita agar hanya bentuk kubus yang terlihat.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Kodenya mungkin terlihat sedikit rumit tetapi berkat variabel CSS yang perlu kita lakukan adalah memperbarui beberapa nilai untuk mengontrol matriks kubus kita. Butuh kisi 10⨉10? Perbarui --m dan --n variabel ke 10. Butuh jarak antar kubus yang lebih lebar? Perbarui --gap nilai. Nilai warna hanya digunakan sekali, jadi perbarui untuk palet warna baru!

Sekarang kita memiliki teknik 3D lainnya, mari kita gunakan untuk membuat variasi loader dengan bermain-main dengan animasi yang berbeda. Misalnya, bagaimana dengan pola berulang kubus yang meluncur tanpa batas dari kiri ke kanan?

Loader ini mendefinisikan empat kubus dalam satu baris. Itu berarti kami --n Nilai adalah 4 dan --m adalah sama dengan 1 . Dengan kata lain, kita tidak lagi membutuhkan ini!

Sebagai gantinya, kita dapat bekerja dengan --size dan --gap variabel dalam wadah kotak:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

Ini adalah wadah kami. Kami memiliki empat kubus, tetapi hanya ingin menunjukkan tiga kubus pada satu waktu sehingga kami selalu memiliki satu kubus yang meluncur saat satu kubus meluncur keluar. Itu sebabnya kami memfaktorkan lebarnya dengan 3 dan atur rasio aspeknya ke 3 juga.

Mari kita pastikan bahwa pola kubus kita diatur untuk lebar empat kubus. Kita akan melakukan ini pada wadah ::before elemen semu:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Sekarang kita memiliki empat kubus dalam wadah tiga kubus, kita dapat membenarkan pola kubus ke ujung wadah kisi untuk meluap, menunjukkan tiga kubus terakhir:

.loader { /* same as before */ justify-content: end;
}

Inilah yang kita miliki sejauh ini, dengan garis merah untuk menunjukkan batas wadah kisi:

Sekarang yang harus kita lakukan adalah memindahkan elemen pseudo ke kanan dengan menambahkan animasi kita:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Apakah Anda mendapatkan trik animasi? Mari selesaikan ini dengan menyembunyikan pola kubus yang meluap dan dengan menambahkan sentuhan masking untuk menciptakan efek memudar yang dimulai dan diakhiri:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Kita bisa membuat ini jauh lebih fleksibel dengan memperkenalkan variabel, --n, untuk mengatur berapa banyak kubus yang ditampilkan dalam wadah sekaligus. Dan karena jumlah total kubus dalam pola harus satu lebih dari --n, kita dapat menyatakannya sebagai calc(var(--n) + 1).

Berikut hal lengkapnya:

Oke, satu lagi pemuat 3D yang serupa tetapi kubusnya berubah warna secara berurutan alih-alih meluncur:

Kami akan mengandalkan latar belakang animasi dengan background-blend-mode untuk yang ini:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Saya telah menghapus kode berlebihan yang digunakan untuk membuat tata letak yang sama seperti contoh terakhir, tetapi dengan tiga kubus, bukan empat. Apa yang saya tambahkan di sini adalah gradien yang ditentukan dengan warna tertentu yang menyatu dengan gradien kerucut, seperti yang kita lakukan sebelumnya untuk pemuat 3D bilah kemajuan.

Dari sana, itu menganimasikan gradien latar belakang background-position sebagai animasi tiga langkah untuk membuat warna kubus berkedip satu per satu.

Jika Anda tidak terbiasa dengan nilai yang saya gunakan untuk background-position dan sintaks latar belakang, saya sangat merekomendasikan salah satu artikel saya sebelumnya dan salah satu jawaban Stack Overflow saya. Anda akan menemukan penjelasan yang sangat rinci di sana.

Bisakah kita memperbarui jumlah kubus untuk menjadikannya variabel?

Ya, saya punya solusi untuk itu, tapi saya ingin Anda mencobanya daripada menyematkannya di sini. Ambil apa yang telah kita pelajari dari contoh sebelumnya dan coba lakukan hal yang sama dengan yang ini — lalu bagikan pekerjaan Anda di komentar!

Variasi berlimpah!

Seperti tiga artikel lainnya dalam seri ini, saya ingin memberi Anda beberapa inspirasi untuk maju dan membuat loader Anda sendiri. Berikut adalah koleksi yang menyertakan pemuat 3D yang kami buat bersama, ditambah beberapa lainnya untuk mewujudkan imajinasi Anda:

Itu bungkus

Saya benar-benar berharap Anda menikmati menghabiskan waktu membuat pemuat elemen tunggal dengan saya beberapa minggu terakhir ini. Sungguh gila bahwa kami memulai dengan pemintal yang tampaknya sederhana dan kemudian secara bertahap menambahkan potongan baru untuk bekerja sendiri hingga teknik 3D yang masih hanya menggunakan satu elemen dalam markup. Seperti inilah tampilan CSS saat kita memanfaatkan kekuatannya: terukur, fleksibel, dan dapat digunakan kembali.

Sekali lagi terima kasih telah membaca seri kecil ini! Saya akan keluar dengan mengingatkan Anda bahwa saya memiliki koleksi lebih dari 500 loader jika Anda mencari lebih banyak ide dan inspirasi.

---

Pemuat Elemen Tunggal: Menjadi 3D! awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/single-element-loaders-going-3d/