Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5: Loading circle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Demo</title>
<style type='text/css'>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
-webkit-border-radius: 100px;
height: 100px;
width: 100px;
margin: 100px;
-webkit-transition: all 0.5s ease-in;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
<div id="loading"></div>
</body>
</html>
@vtellier
Copy link

vtellier commented Apr 20, 2016

Good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment