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

This comment has been minimized.

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
You can’t perform that action at this time.