Cara menggunakan css circle codepen

Question

Sharing Teknologi – Membuat Animasi Loader Circle Atau Loader yang Berbentuk Lingkaran Menggunakan CSS Di WordPress . Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Animasi Loader Circle Di WordPress dengan hanya bermodal CSS.

Table of Contents Show

Panduan Membuat Animasi Loader Circle
Intro Singkat Tentang CSS Shapes
Membuat Sebuah Bentuk
Kustomisasi Lingkaran
Shape Box Model
Membuat Lebih Banyak Bentuk

Apabila Sobat ingin mempercantik tampilan website dengan animasi dengan hanya bermodal CSS. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.

Dengan hanya bermodal HTML dan style CSS bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.

Tanpa plugin dengan bermodalkan CSS yang cukup sederhana dan simple maka rekan-rekan bisa Membuat Animasi Loader Circle.

CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam.

CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.

CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dan efek pengetikan atau typing effect .

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Loader Circle Dengan Hanya Menggunakan CSS Tanpa Javascript.

NB: kami menggunakan tambahan CSS dari bootstrap.

Panduan Membuat Animasi Loader Circle

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode yang bisa dipasang atau diletakkan di functions.php agar lebih mudah untuk dipasang dimanapun nantinya. Silakan nanti bisa disesuaikan dengan kebutuhan.

function loader_circle() {
ob_start(); ?>
<div class="loadercircle-frame bg-light bg-gradient position-relative p-3">
    <div class="bg flex">
      <div class="c"></div>
      <div class="line"></div>
      <div class="r1"></div>
      <div class="r2"></div>
    </div>
</div>

<!--style CSS-->
<style>
.loadercircle-frame  .flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loadercircle-frame {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loadercircle-frame .bg {
  width: 160px;
  height: 160px;
  background: #824b20;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  animation: anim 2s;
  animation-iteration-count: infinite;
}

.loadercircle-frame .c {
  position: relative;
  width: 100px;
  height: 100px;
  background: #e08027;
  border-radius: 50%;
}

.loadercircle-frame .r1 {
  background: #fff58f;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateX(-30px);
}

.loadercircle-frame .r2 {
  background: #fff58f;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateX(30px);
}

.loadercircle-frame .line {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  border: 20px solid transparent;
  border-bottom-color: #fff58f;
  border-right-color: #fff58f;
  transform: rotate(45deg);
}

@keyframes anim {
  0% {
    transform: rotate(0deg) sacle(1);
  }
  25% {
    transform: rotate(180deg) scale(1.3);
  }
  50% {
    transform: rotate(360deg) scale(1.3);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
</style>



    <?php return ob_get_clean();
}
add_shortcode('loadercircle', 'loader_circle');

Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.

[*loadercircle*] //hilangkan tanda bintang

Namun jika berupa tag HTML atau php maka bisa menggunakan dibawah ini

<?php echo do_shortcode('[*loadercircle*]') ;?> //hilangkan tanda bintang

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom

Prinsip layout-kolom dan baris, sudut dan garis-yang kita gunakan untuk membangun website saat ini sebagian besar dipengaruhi oleh warisan cetak mereka. Dan walaupun penerapan grid pada web semakin membaik dan lebih terpoles, layout web secara umum masih tampak canggung dibandingkan media cetak, khususnya tentang alur konten.

Majalah dan koran selalu menikmati cara elegan untuk menyusun layout konten, seperti membungkus teks, atau di dalam bentuk non persegi.

Majalah Multiguna oleh GreenSocks

Mari menjelajah bagaimana CSS Shapes Module akan memberikan kita kebebasan yang sama ini pada web.

Intro Singkat Tentang CSS Shapes

CSS Shapes memudahkan desainer web untuk membuat layout yang lebih abstrak dan geometris, melebihi segiempat dan persegi sederhana. Spesifikasi menyediakan kita dengan CSS properties baru yang mencakup

<p>Lorem ipsum…</p>

0 dan

<p>Lorem ipsum…</p>

1. Dukungan browser cukup , walaupun properties ini sekarang hanya tersedia di Chrome, Opera, dan Safari, dengan prefix

<p>Lorem ipsum…</p>

2, karenanya

<p>Lorem ipsum…</p>

3.

Property

<p>Lorem ipsum…</p>

0 akan menyebabkan konten sebaris membungkus dengan area sekitar (luar) diikuti dengan elemen curve, bukan model box. Pada awalnya ada juga

<p>Lorem ipsum…</p>

5 untuk membungkus konten di dalam elemen; teks dalam elemen bundar akan dicetak dalam bentuk lingkaran juga. Bagaimana pun juga, penerapan ini telah ditunda untuk CSS Shapes Level 2.

Dari atas ke bawah: shape-outside dan shape-inside dalam aksinya.

Property

<p>Lorem ipsum…</p>

1 mengatur margin di sekitar bentuk apapun yang menggunakan

<p>Lorem ipsum…</p>

0.

Mari lihat beberapa contoh.

Membuat Sebuah Bentuk

Cara termudah untuk mengetahui bahwa CSS Shapes berfungsi adalah mungkin dengan membuat sebuah lingkaran. Jadi, berikut

<p>Lorem ipsum…</p>

8 (lingkaran kita), dengan beberapa paragraf bersamanya.

<div class="circle"></div>

<p>Lorem ipsum…</p>

<p>Lorem ipsum…</p>

<p>Lorem ipsum…</p>

Berikut beberapa hal-hal dasar styling, termasuk width dan height lingkaran kita,

<p>Lorem ipsum…</p>

9 untuk membentuk elemen, dan sebuah float sehingga paragraf terbungkus di sekitar elemen.

.circle {

<div class="circle"></div>

1

<div class="circle"></div>

3

<div class="circle"></div>

5

<div class="circle"></div>

6

<div class="circle"></div>

7

<div class="circle"></div>

8

<div class="circle"></div>

9

0

1

Seperti yang dapat kita harapkan, paragraf sekarang terbungkus di sekitar elemen. Bagaimana pun juga, karena property border-radius tidak menjelaskan bentuk elemen actual, pembungkusan paragraf tidak membentuk lingkaran.

Jika kita memeriksa elemen melalui DevTools browser kita, kita akan menemukan elemen yang, nyatanya, masih berapa kotak. Jadi, walaupun div memiliki tampilan lingkaran,

<p>Lorem ipsum…</p>

9 tidak melakukan apa-apa terhadap bentuk aktual elemen.

Perhatikan bentuk segiempat menyoroti sekitar elemen.

Agar paragraf kita mematuhi bentuk lingkaran, kita perlu mengubah bentuk elemen aktual melalui property

<p>Lorem ipsum…</p>

0; dalam hal ini, kita akan menambahkan satu dengan fungsi

2 lolos sebagai nilai.

3

<div class="circle"></div>

1

<div class="circle"></div>

3

<div class="circle"></div>

5

<div class="circle"></div>

6

<div class="circle"></div>

7

<div class="circle"></div>

8

<div class="circle"></div>

9

0

<p>Lorem ipsum…</p>

5

<p>Lorem ipsum…</p>

6

<p>Lorem ipsum…</p>

7

<p>Lorem ipsum…</p>

8

1

Paragraf kita sekarang membungkus rapi di sekitar keliling lingkaran.

Sebagai tambahan, jika kita sekarang menginspeksi elemen melalui DevTools, kita akan melihat bahwa elemen dirender secara sesuai ke dalam lingkaran.

Perhatikan highlight yang lebih gelap

Dengan beberapa margin, lihat bagaimana itu mungkin memperbagus layout sederhana:

Kustomisasi Lingkaran

Fungsi

2 mengambil beberapa nilai dalam menentukan radius dan pusat koordinat secara berturut-turut:

4. Secara default, nilai radius diturunkan dari ukuran elemen; jika elemen lebarnya

5, sebagai contoh, radius akan menjadi

6(radius merupakan separuh diameter lingkaran).

Sama halnya, koordinat

7 dan

8 diukur relatif terhadap ukuran elemen, dan secara default diatur pada

9; tepat di pusat elemen.

Lingkaran diposisikan di pusat elemen.

Dua nilai ini akan berguna ketika kamu ingin mengubah ukuran bentuk, sembari mempertahankan ukuran elemen aktual, atau memindahkan bentuk sembari menjaga posisi elemen. Dalam contoh di bawah, kita akan mengurangi radius lingkaran hingga

.circle {

0 dan menentukan koordinat pusat ke

.circle {

1, yang akan memindahkan lingkaran ke kiri bawah kotak elemen.

Paragraf sekarang melewati kotak elemen mengikuti ukuran lingkaran. Tonton demo.

Layak untuk diperhatikan bahwa ketika memodifikasi lingkaran baik koordinat pusat dan radius harus didefinisikan secara eksplisit; dengan menambahkan hanya satu dari mereka yang tidak valid.

1

3

5

Shape Box Model

CSS Shapes mewarisi prinsip box model yang sama dengan elemen, namun menerapkan di luar ruang lingkup elemen itu sendiri. Ini membuat kita secara terpisah menentukan elemen, katakan, ke

.circle {

2 sembari mengatur bentuk ke

.circle {

3. Untuk mengubah shape box model, tambahkan satu kata kunci box model,

.circle {

4,

.circle {

5,

.circle {

2, atau

.circle {

3 setelah fungsi.

3

9

<p>Lorem ipsum…</p>

1

<p>Lorem ipsum…</p>

3

<div class="circle"></div>

6

<p>Lorem ipsum…</p>

5

<div class="circle"></div>

8

<p>Lorem ipsum…</p>

7

0

<p>Lorem ipsum…</p>

9

<p>Lorem ipsum…</p>

6

1

<p>Lorem ipsum…</p>

8

3

4

5

6

7

8

1

Box-model default pada shape ditentukan ke

.circle {

5. Dan dalam contoh di bawah, kita menggantinya ke

.circle {

3 untuk memberitahu browser untuk tidak mencantumkan margin elemen ketika menentukan ukuran atau span shape. Sekarang kita seharusnya menemukan paragraf melewati tepi, dan secara langsung menyentuh padding elemen.

Persegi oranye adalah marginnya, persegi kuning adalah tepiannya, dan persegi hijau adalah paddingnya,

I sangat merekomendasikan untuk memeriksa course gratis kami tentang Hal-hal Dasar CSS Box Model untuk lebih lanjut tentang bagaimana box-model berkerja secara detail.

Membuat Lebih Banyak Bentuk

Spesifikasi CSS Shapes hadir dengan beberapa bentuk fungsi bentuk:

```
<div class="circle"></div>
```
00: Seperti sesuai namanya, fungsi ini akan membuat sebuah bentuk elips. Kita dapat mengkonfigurasi radius elips dan juga menggerakkan koordinat pusat bentuk. Namun tidak seperti fungsi
```
1
```
2, fungsi
```
<div class="circle"></div>
```
00 menerapkan dua pengukuran radius, horizontal dan vertikal, karenanya
```
<div class="circle"></div>
```
03.
```
<div class="circle"></div>
```
04: Fungsi ini membuat kita dapat membuat bentuk yang lebih kompleks seperti segitiga, hexagon, juga bentuk non geometris. Menggunakan polygon tidak semudah membuat lingkaran, namun tool Path to Polygon Converter membuatnya lebih intuitif.

Kesimpulan

Dalam tutorial ini, kita melihat ke dalam aplikasi dasar CSS Shapes; kita membuat sebuah bentuk, menyesuaikan ukuran, posisi, dan box model. Pada waktu penulisan ini, beberapa aspek CSS Shapes tetap sangat kasar di sekitar tepinya, yang mungkin mengapa kita belum melihatnya digunakan secara luas.

Seperti yang disebutkan sebelumnya dalam tutorial ini, properti CSS Shapes
```
<p>Lorem ipsum…</p>
```
5, yang mengijinkan kita membungkus dan membentuk konten di dalam sebuah elemen, telah ditunda.
Spesifikasi CSS Shapes menyediakan properti terpisah bernama
```
<div class="circle"></div>
```
06 untuk mendefinisikan shape box-model, walaupun itu saat ini tampak tidak dapat diterapkan pada browser manapun.
Safari memerlukan prefix
```
<p>Lorem ipsum…</p>
```
2, menyoroti bahwa fitur ini masih dalam percobaan.

Meskipun begitu, terlepas dari progress lambat dan perbedaan antara browser saat ini, saya mengharapkan CSS Shapes! Setelah browser besar memilih itu saya tidak dapat menunggu untuk melihat layout web yang sangat kreatif!

kode css