Skip to content

Instantly share code, notes, and snippets.

@andersbrohall

andersbrohall/gist:cbc91895930299a24980

Last active August 29, 2015 14:10
Show Gist options
  • Save andersbrohall/cbc91895930299a24980 to your computer and use it in GitHub Desktop.
Save andersbrohall/cbc91895930299a24980 to your computer and use it in GitHub Desktop.
Download ZIP
Button animated to loader in CSS3
Raw
gistfile1.html
<html>
<head>
<style>
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
.loading.load.button {
background-color: #fff;
border-width: 2px;
border-radius: 17px;
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #999;
color: rgba(255,255,255,0);
height: 24px;
width: 24px;
margin: 5px 0 0;
padding: 0;
pointer-events: none;
-moz-animation: spin 1.2s infinite linear;
-webkit-animation: spin 1.2s infinite linear;
-o-animation: spin 1.2s infinite linear;
-ms-animation: spin 1.2s infinite linear;
animation: spin 1.2s infinite linear;
}
.load.button {
text-align: center;
background-color: transparent;
min-width: 0;
min-height: 0;
width: auto;
height: 34px;
transition: margin 0.2s ease,width 0.1s ease,height 0.4s ease,border-width 0.4s ease,border-radius 0.4s ease,border-color 0.4s ease,padding 0.4s ease;
-webkit-transition: margin 0.2s ease,width 0.1s ease,height 0.4s ease,border-width 0.4s ease,border-radius 0.4s ease,border-color 0.4s ease,padding 0.4s ease;
-moz-transition: margin 0.2s ease,width 0.1s ease,height 0.4s ease,border-width 0.4s ease,border-radius 0.4s ease,border-color 0.4s ease,padding 0.4s ease;
-o-transition: margin 0.2s ease,width 0.1s ease,height 0.4s ease,border-width 0.4s ease,border-radius 0.4s ease,border-color 0.4s ease,padding 0.4s ease;
-ms-transition: margin 0.2s ease,width 0.1s ease,height 0.4s ease,border-width 0.4s ease,border-radius 0.4s ease,border-color 0.4s ease,padding 0.4s ease;
}
.button {
font-family:arial;
text-decoration:none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 1px;
color: #333;
cursor: pointer;
display: inline-block;
line-height: 1;
position: relative;
white-space: nowrap;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
min-height: 34px;
padding: 9px 20px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: border-color 0.1s linear,background 0.1s linear,color 0.1s linear;
-webkit-transition: border-color 0.1s linear,background 0.1s linear,color 0.1s linear;
-moz-transition: border-color 0.1s linear,background 0.1s linear,color 0.1s linear;
-o-transition: border-color 0.1s linear,background 0.1s linear,color 0.1s linear;
-ms-transition: border-color 0.1s linear,background 0.1s linear,color 0.1s linear;
}
body { margin:20px auto; }
div { text-align:center; }
</style>
</head>
<body>
<div>
<a href="#" class="load button">Ladda in fler</a>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$('a.button').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('loading')
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment