Skip to content

Instantly share code, notes, and snippets.

@nodegin

nodegin/holo-loader.html

Created February 13, 2019 10:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nodegin/bb4fb3577360b883bde65ca4130d7619 to your computer and use it in GitHub Desktop.
Save nodegin/bb4fb3577360b883bde65ca4130d7619 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
holo-loader.html
<div>
<img alt src="data:image/png;base64,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">
<img alt src="data:image/png;base64,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">
<style>
@keyframes rotate1 {
to { transform: rotate(-359deg); }
}
@keyframes rotate2 {
to { transform: rotate(359deg); }
}
div {
animation: rotate2 4s linear infinite;
height: 72px;
position: relative;
width: 72px;
}
img {
left: 0;
position: absolute;
top: 0;
}
img:nth-child(1) {
animation: rotate1 1s linear infinite;
}
img:nth-child(2) {
animation: rotate2 1s linear infinite;
}
</style>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment