Cara Membuat Tombol Loader Dengan AngularJs

14/01/2019    Shelli Ripati    368     Website

Kali ini saya akan membahas tentang Cara Membuat Tombol Loader Dengan AngularJs. Tombol loader adalah tombol dengan animasi ikon berputar yang mengartikan bahwa sedang melakukan suatu proses.  Konsepnya hampir sama dengan artikel sebelumnya tentang Cara Membuat Progress Bar Dengan Menggunakan AngularJs.

Dimana saya akan membuat fungsi untuk menambahkan nilai rotate pada property transform di css yang dijalankan dengan menggunakan interval dari angularJs.

Langkah pertama Cara Membuat Tombol Loader Dengan AngularJs yaitu saya akan buat terlebih tampilan tombolnya seperti script di bawah ini.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

<style>

body{text-align: center}

.buttonload {

  background-color: salmon;

  border: none;

  color: white;

  padding: 12px 24px;

  font-size: 16px;

}


</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl" ng-init="load()">


<h2>Cara Membuat Tombol Loading Dengan AngularJs</h2>


<button class="buttonload">

  <i class="fas fa-spinner" style ="transform: rotate({{count}}deg)"></i> Loading

</button>


<button class="buttonload">

  <i class="fas fa-redo" style ="transform: rotate({{count}}deg)"></i> Loading

</button>

</body>

</html>

Struktur html di atas sudah saya berikan beberapa direktif yang di perlukan, seperti  ng-app="myApp" utnuk mengaktifkan angularJs, ng-controller="myCtrl" untuk menjalankan controller yang akan kita buat, ng-init="load()" untuk menjalankan fungsi yang ada di dalam controller dan terakhir style ="transform: rotate({{count}}deg)" dimana variable count akan selalu berubah nilainya sesuai fungsi yang di buat.

Dan sekarang kita akan membuat fungsi untuk menjalankan tombol loading agar berputar 360 derajat. Untuk bagian yang di putar adalah di bagian tag i dengan nama class fas yang sudah diberikan style transform.

<script>

  var app = angular.module("myApp",[]);

  app.controller("myCtrl", function($scope, $interval){

    $scope.count = 0;

      $scope.load = function(){

        $scope.loadingProses = function() {

          if($scope.count<=360){

            $scope.count = $scope.count+5;

          }else{

             $scope.count = 0;

          } 

        }

        $interval( function(){ $scope.loadingProses(); }, 1);

      }

  })

</script>

 

Teman-teman bisa perhatikan fungsi di atas, dimana variable count akan di tambahkan 5 secara terus menerus  dengan menggunakan $interval yang memiliki durasi 1 milisecond. Lalu variable count saya gunakan untuk nilai dari rotate.

Jjka di tampilkan di browser masing-masing, maka tampilan tombol loader akan tampak seperti pada gambar di bawah ini. Dimana ikon loader akan berputar terus menerus.

Cara Membuat Tombol Loader Dengan AngularJs

Demikian artikel tentang Cara Membuat Tombol Loader Dengan AngularJs. Semoga bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More