Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Efek Loading Tombol Tanpa Javascript

Oke sobat semua, tips dan trik yang saya bagikan disini mengenai html merupakan tips yang professional dan mudah penggunaannya serta sudah di optimisasi.     Bagi anda yang menggunakan kode javascript sebagai kode untuk membuat efek loading pada website anda, sebaiknya tinggalkan cara itu. Anda harus beralih ke tutorial yang satu ini.

Mengapa saya katakan demikian? karena dengan menggunakan cara seperti ini dapat mempercepat loading website anda alias meringankan sedikit lelet website anda dibanding dengan menggunakan javascript.

Cara Membuat Efek Loading Tombol Tanpa Javascript

Cara Membuat Efek Loading Tombol Tanpa Javascript 2
Untuk tutorialnya, silahkan anda ikuti cara  – cara berikut ini.
Silahkan  simpan kode dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Efek loading tombol pada html tanpa javascript</title>
<style>
@-webkit-keyframes ld {
0%   { transform: rotate(0deg) scale(1); }
50%  { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
@-moz-keyframes ld {
0%   { transform: rotate(0deg) scale(1); }
50%  { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
@-o-keyframes ld {
0%   { transform: rotate(0deg) scale(1); }
50%  { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes ld {
0%   { transform: rotate(0deg) scale(1); }
50%  { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
.m-progress {
position: relative;
opacity: .8;
color: transparent !important;
text-shadow: none !important;
}
.m-progress:hover,
.m-progress:active,
.m-progress:focus {
cursor: default;
color: transparent;
outline: none !important;
box-shadow: none;
}
.m-progress:before {
content: ”;
display: inline-block;
position: absolute;
background: transparent;
border: 1px solid #fff;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
box-sizing: border-box;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
width: 24px;
height: 24px;
-webkit-animation: ld 1s ease-in-out infinite;
-moz-animation:    ld 1s ease-in-out infinite;
-o-animation:      ld 1s ease-in-out infinite;
animation:         ld 1s ease-in-out infinite;
}
.btn-default.m-progress:before {
border-left-color: #333333;
border-right-color: #333333;
}
.btn-lg.m-progress:before {
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
}
.btn-sm.m-progress:before {
margin-top: -9px;
margin-left: -9px;
width: 18px;
height: 18px;
}
.btn-xs.m-progress:before {
margin-top: -7px;
margin-left: -7px;
width: 14px;
height: 14px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”row”>
<h1 class=”col-xs-12″>Loading button effect</h1>
<div class=”col-xs-12 text-center”>
<h2>Preview</h2>
<table class=”table”>
<tr>
<th>No effect</th>
<th>With effect</th>
</tr>
<tr>
<td colspan=”2″>Base effect</td>
</tr>
<tr>
<td>
<button class=”btn btn-lg btn-primary”>Button</button>
<button class=”btn btn-lg btn-default”>Button</button>
<button class=”btn btn-lg btn-info”>Button</button>
<button class=”btn btn-lg btn-warning”>Button</button>
<button class=”btn btn-lg btn-danger”>Button</button>
</td>
<td>
<button class=”btn btn-lg btn-primary m-progress”>Button</button>
<button class=”btn btn-lg btn-default m-progress”>Button</button>
<button class=”btn btn-lg btn-info m-progress”>Button</button>
<button class=”btn btn-lg btn-warning m-progress”>Button</button>
<button class=”btn btn-lg btn-danger m-progress”>Button</button>
</td>
</tr>
<tr>
<td colspan=”2″>For any size</td>
</tr>
<tr>
<td>
<button class=”btn btn-lg btn-primary”>Button</button>
<button class=”btn btn-primary”>Button</button>
<button class=”btn btn-sm btn-primary”>Button</button>
<button class=”btn btn-xs btn-primary”>Button</button>
</td>
<td>
<button class=”btn m-progress btn-lg btn-primary”>Button</button>
<button class=”btn m-progress btn-primary”>Button</button>
<button class=”btn m-progress btn-sm btn-primary”>Button</button>
<button class=”btn m-progress btn-xs btn-primary”>Button</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

Sekian tutorialnya dan jika ada pertanyaan, silahkan kirimkan didalam kotak komentar dibawah ini  dan jika tidak ada dan sudah mengerti berarti saya dosen yang mudah mengajarkan tutorial kepada anda. ^_^ ^_^ ^_^ ^_^ ^_^
Pernando Harianja
Pernando Harianja Pendiri dan Pengelola di InfoLoh.com, yang hobby dalam pembuatan Program Komputer, dan ngeBlog. Untuk kenal lebih dekat Follow IG saya: @pernando_harianja

Posting Komentar untuk "Cara Membuat Efek Loading Tombol Tanpa Javascript"