Skip to content

Instantly share code, notes, and snippets.

@docherty

docherty/css-spinner.html

Last active October 20, 2017 16:52
Show Gist options
  • Save docherty/d910593f3b07469cecaab1a73eb3972d to your computer and use it in GitHub Desktop.
Save docherty/d910593f3b07469cecaab1a73eb3972d to your computer and use it in GitHub Desktop.
Download ZIP
A simple CSS spinner
Raw
css-spinner.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS spinner</title>
<style>
.wrapper{
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.spinner{
display: inline-block;
position: relative;
width: 100px;
height: 100px;
vertical-align: middle;
border-radius: 100%;
background-color: #000;
/*background-image: url("https://s3-us-west-2.amazonaws.com/svgporn.com/logos/css-3_official.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 30px;*/
}
.myspan {
z-index: -1;
display: block;
position: relative;
width: inherit;
height: inherit;
animation: spin 1.75s linear infinite;
}
.myspan:before, .myspan:after{
content: '';
display: block;
position: absolute;
top: -1px;
bottom: -1px;
}
.myspan:before {
left: -1px;
right: 50%;
border-radius: 100px 0 0 100px;
background-image: linear-gradient( to top, #000, rgba(255,255,255,0.2) );
}
.myspan:after {
right: -1px;
left: 50%;
border-radius: 0 100px 100px 0;
background-image: linear-gradient(to top,#fff,rgba(255,255,255,0.2));
}
@keyframes spin { to { transform:rotate(360deg); } }
</style>
</head>
<body class="wrapper">
<div class="spinner">
<span class="myspan"></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment