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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
vtellier commentedApr 20, 2016
Good idea.