Pemuat Elemen Tunggal: Batang

Kami telah melihat pemintal. Kami telah melihat titik-titik. Sekarang kita akan menangani pola umum lainnya untuk loader: bar. Dan kita akan melakukan hal yang sama di artikel ketiga dari seri ini seperti yang kita miliki dengan yang lain dengan membuatnya hanya dengan satu elemen dan dengan CSS fleksibel yang memudahkan untuk membuat variasi.

Mari kita mulai dengan bukan hanya satu, bukan dua, tetapi 20 contoh bar loader.

Apa?! Apakah Anda akan merinci masing-masing dari mereka? Itu terlalu banyak untuk sebuah artikel!

Mungkin terlihat seperti itu pada pandangan pertama! Tetapi semuanya bergantung pada struktur kode yang sama dan kami hanya memperbarui beberapa nilai untuk membuat variasi. Itu semua kekuatan CSS. Kami tidak mempelajari cara membuat satu loader, tetapi kami mempelajari berbagai teknik yang memungkinkan kami membuat loader sebanyak yang kami inginkan hanya dengan menggunakan struktur kode yang sama.

Mari kita membuat beberapa bar!

Kami mulai dengan mendefinisikan dimensi untuk mereka menggunakan width (Atau height) Dengan aspect-ratio untuk menjaga proporsi:

.bars { width: 45px; aspect-ratio: 1;
}

Kami mengurutkan tiga batang "palsu" dengan gradien linier di latar belakang — sangat mirip dengan cara kami membuat pemuat titik di Bagian 2 seri ini.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Kode di atas akan memberi kita hasil sebagai berikut:

Seperti artikel lain dalam seri ini, kita akan membahas banyak hal background tipu daya. Jadi, jika Anda merasa kami melompat terlalu cepat atau merasa perlu sedikit lebih detail, silakan periksa. Anda juga dapat membaca saya Jawaban Stack Overflow di mana saya berikan penjelasan rinci tentang bagaimana semua ini bekerja.

Menganimasikan bar

Kami menganimasikan ukuran atau posisi elemen untuk membuat pemuat batang. Mari kita menganimasikan ukuran dengan mendefinisikan keyframe animasi berikut:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Lihat apa yang terjadi di sana? Antara 0% dan 100%, animasi mengubah background-size dari gradien latar belakang elemen. Setiap bingkai utama menetapkan tiga ukuran latar belakang (satu untuk setiap gradien).

Dan inilah yang kami dapatkan:

Bisakah Anda mulai membayangkan semua kemungkinan variasi yang bisa kita dapatkan dengan bermain dengan konfigurasi animasi yang berbeda untuk ukuran atau posisi?

Jom perbaiki size ke 20% 50% dan perbarui posisi kali ini:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…yang memberi kita loader lain!

Anda mungkin sudah mendapatkan triknya sekarang. Yang Anda butuhkan hanyalah menentukan garis waktu yang Anda terjemahkan ke dalam bingkai utama. Dengan menganimasikan ukuran, posisi — atau keduanya! — ada banyak kemungkinan loader di ujung jari kita.

Dan begitu kita merasa nyaman dengan teknik seperti itu, kita bisa melangkah lebih jauh dan menggunakan gradien yang lebih kompleks untuk membuat genap lebih pemuat.

Harapkan untuk dua contoh terakhir dalam demo itu, semua pemuat batang menggunakan markup dan gaya dasar yang sama dan kombinasi animasi yang berbeda. Buka kode dan coba visualisasikan setiap frame secara independen; Anda akan melihat betapa sepelenya membuat lusinan — kalau bukan ratusan - variasi.

Menjadi mewah

Apakah Anda ingat trik topeng yang kami lakukan dengan dot loader di artikel kedua dari seri ini? Kita bisa melakukan hal yang sama di sini!

Jika kita menerapkan semua logika di atas di dalam mask properti kita dapat menggunakan konfigurasi latar belakang apa pun untuk menambahkan warna mewah ke loader kita.

Mari kita ambil satu demo dan perbarui:

Yang saya lakukan hanyalah memperbarui semua background-* dengan mask-* dan saya menambahkan warna gradien. Sesederhana itu namun kami mendapatkan loader keren lainnya.

Jadi tidak ada perbedaan antara titik dan batang?

Tidak ada perbedaan! Saya menulis dua artikel berbeda untuk membahas sebanyak mungkin contoh, tetapi dalam keduanya, saya mengandalkan teknik yang sama:

1. Gradien untuk membuat bentuk (titik atau batang atau mungkin yang lainnya)
2. Animasi background-size dan / atau background-position untuk membuat animasi pemuat
3. Menambahkan topeng untuk menambahkan sentuhan warna

Membulatkan bar

Mari kita coba sesuatu yang berbeda kali ini di mana kita bisa membulatkan tepi jeruji kita.

Menggunakan satu elemen dan ::before dan ::after pseudos, kami mendefinisikan tiga batang identik:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Itu memberi kita tiga batang, kali ini tanpa bergantung pada gradien linier:

Sekarang triknya adalah mengisi bar tersebut dengan gradien yang indah. Untuk mensimulasikan gradien kontinu, kita perlu bermain dengan background properti. Pada gambar di atas, area hijau mendefinisikan area yang dicakup oleh loader. Area itu harus seukuran gradien dan, jika kita menghitungnya, itu sama dengan mengalikan kedua sisi yang diberi label S dalam diagram, atau background-size: var(--s) var(--s).

Karena elemen kita ditempatkan secara individual, kita perlu memperbarui posisi gradien di dalam masing-masing elemen untuk memastikan semuanya tumpang tindih. Dengan cara ini, kami mensimulasikan satu gradien kontinu meskipun itu benar-benar tiga.

Untuk elemen utama (ditempatkan di tengah), latar belakang harus berada di tengah. Kami menggunakan yang berikut ini:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Untuk elemen semu di sebelah kiri, kita membutuhkan latar belakang di sebelah kiri

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Dan untuk pseudo di sebelah kanan, latar belakang perlu diposisikan ke kanan:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Menggunakan variabel CSS yang sama, --_i, yang kita gunakan untuk menerjemahkan, kita dapat menulis kode seperti ini:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Sekarang, yang harus kita lakukan adalah menganimasikan ketinggian dan menambahkan beberapa penundaan! Berikut adalah tiga contoh di mana semua yang berbeda adalah warna dan ukuran:

Membungkus

Saya harap sejauh ini Anda merasa sangat terdorong oleh semua kekuatan yang Anda miliki untuk membuat animasi pemuatan yang tampak rumit. Yang kita butuhkan hanyalah satu elemen, baik gradien atau pseudo untuk menggambar batang, lalu beberapa bingkai utama untuk memindahkan sesuatu. Itulah seluruh resep untuk mendapatkan kemungkinan yang tak terbatas, jadi pergilah dan mulai memasak beberapa hal yang rapi!

Sampai artikel berikutnya, saya akan meninggalkan Anda dengan koleksi loader lucu yang saya gabungkan titik dan bar!

---

Pemuat Elemen Tunggal: Batang 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-the-bars/