Skip to content

Instantly share code, notes, and snippets.

@stiekel

stiekel/spinner.html

Created March 5, 2018 01:42
Show Gist options
  • Save stiekel/4b27f7b18251f2ddc50c56c38e0e6f46 to your computer and use it in GitHub Desktop.
Save stiekel/4b27f7b18251f2ddc50c56c38e0e6f46 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Spinner
Raw
spinner.html
<!DOCTYPE html>
<html>
<head>
<title>Echarts</title>
<style type="text/css">
@keyframes loading-spinner {
0% {transform: rotate(0deg);}
20% {transform: rotate(120deg);}
40% {transform: rotate(240deg);}
50% {transform: rotate(270deg);}
60% {transform: rotate(240deg);}
80% {transform: rotate(120deg);}
100% {transform: rotate(0deg);}
}
#spinner {
border: 4px solid rgba(0, 0, 0, .1);
box-shadow: 2px 0px 15px rgba(0, 0, 0, .6);
border-bottom-color: #fd79a8;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
animation: loading-spinner 1.2s linear infinite;
}
</style>
</head>
<body>
<p id="spinner"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment