Membuat CSS Spinner Web Menggunakan Vue.js

- Last Update Februari 10, 2018
Hosting Unlimited Indonesia
Membuat CSS Spinner Web Menggunakan Vue.jsMembuat CSS Spinner Web Menggunakan Vue.jsMembuat CSS Spinner Web Menggunakan Vue.js


CaraWordpress.com - Mempercantik tampilan web menjadi alternatif bagi kita-kita yang ingin memanjankan pengunjung dengan interface web yang memukau, salah satunya dengan menggunakan css spinner.

Meskipun menambahkan css spinner di web, jangan sampai web menjadi semakin lambat, solusinya dengan menggunakan css spinner dan integrasi Vue.js. Hanya CSS, mudah digunakan, dengan integrasi Vue.js.

Berikut ini cara membuat css spinner.

Installasi

Install menggunakan perintah berikut
yarn add epic-spinners

Import spinner yang ingin ente gunakan dan mendaftarkan komponennya
import {FulfillingBouncingCircleSpinner, FlowerSpinner, AtomSpinner} from 'epic-spinners'
export default {
   components: {
   FlowerSpinner,
   FulfillingBouncingCircleSpinner,
   AtomSpinner
   }
}

Ente bisa dengan mudah mengatur kecepatan spinner, animasi, dan warnanya.
<flower-spinner:animation-duration="2500":size="70":color="'#4286f4'"/>
<fulfilling-bouncing-circle-spinner:animation-duration="4000":size="80":color="'#ff1d5e'"/>
<atom-spinner:animation-duration="1000":size="60":color="'#f44941'"/>


Project ini juga tersedia di GitHub, oleh @epicmaxco.

Source
kostas maniatis, Easy to use css spinners collection with Vue.js integration

Baca doang? Gak mau ngomen apa gitu?
EmoticonEmoticon

 

Masukan keyword