Built-In Loading Effect in Buttons
HTML
<div class="wrapper">
<h1>Built-In Loading Effect in Buttons</h1>
<a href="https://github.com/alexanderkx/aiLoadingButtons">https://github.com/alexanderkx/aiLoadingButtons</a>
<div class="buttons circle">
<h3><pre>.btn-load--circle</pre></h3>
<button class="btn btn-outline">Click Me!</button>
<button class="btn btn-primary">Click Me!</button>
<button class="btn btn-info">Click Me!</button>
<br><br>
<button class="btn btn-success">Click Me!</button>
<button class="btn btn-warning">Click Me!</button>
<button class="btn btn-danger">Click Me!</button>
<button class="btn btn-dark">Click Me!</button>
</div>
<div class="buttons circle_only">
<h3><pre>.btn-load--circle-only</pre></h3>
<button class="btn btn-outline">Click Me!</button>
<button class="btn btn-primary">Click Me!</button>
<button class="btn btn-info">Click Me!</button>
<br><br>
<button class="btn btn-success">Click Me!</button>
<button class="btn btn-warning">Click Me!</button>
<button class="btn btn-danger">Click Me!</button>
<button class="btn btn-dark">Click Me!</button>
</div>
</div>
CSS
body {
font-family: arial;
}
.wrapper {
width: 550px;
margin: 0 auto;
padding: 25px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
.wrapper h1 {
margin: 0 0 10px 0;
font-weight: normal;
}
.buttons {
margin-top: 10px;
padding: 15px;
}
.circle_only {
background-color: #F1F1DC;
}
JAVASCRIPT
var effect1 = document.querySelectorAll( '.circle .btn' );
for ( var i = 0; i < effect1.length; i++ ) {
effect1[i].addEventListener( 'click',(function (e){
e.preventDefault();
this.classList.toggle("btn-load--circle");
}));
}
var effect2 = document.querySelectorAll( '.circle_only .btn' );
for ( var i = 0; i < effect2.length; i++ ) {
effect2[i].addEventListener( 'click',(function (e){
e.preventDefault();
this.classList.toggle("btn-load--circle-only");
}));
}
1 Response