Skip to content

Instantly share code, notes, and snippets.

@bndynet
Created July 26, 2018 09:08
Show Gist options
  • Save bndynet/ace2c705851a3abe5e28d5b6d13bcebf to your computer and use it in GitHub Desktop.
Save bndynet/ace2c705851a3abe5e28d5b6d13bcebf to your computer and use it in GitHub Desktop.
styles for in-process
<label>
<i class="icon-loading"></i> Loading
</label>
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.icon-loading {
display: inline-block;
width: 1em;
height: 1em;
position: relative;
top: 0.2em;
border-radius: 50%;
box-sizing: border-box;
border-top: 2px solid rgba(0, 0, 0, 0.1);
border-right: 2px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-left: 2px solid #009EDC;
animation: rotate 1s infinite linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment