Line 1: | Line 1: | ||
− | + | Loading, please wait | |
+ | <html> | ||
+ | <img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png> | ||
+ | |||
+ | <style> | ||
+ | @keyframes spinner { | ||
+ | 0% { | ||
+ | transform: translate3d(-50%, -50%, 0) rotate(0deg); | ||
+ | } | ||
+ | 100% { | ||
+ | transform: translate3d(-50%, -50%, 0) rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .spinner { | ||
+ | // The height here is just for demo purposes | ||
+ | height: 100vh; | ||
+ | opacity: 1; | ||
+ | position: relative; | ||
+ | transition: opacity linear 0.1s; | ||
+ | |||
+ | &::before { | ||
+ | animation: 2s linear infinite spinner; | ||
+ | border: solid 3px #eee; | ||
+ | border-bottom-color: #EF6565; | ||
+ | border-radius: 50%; | ||
+ | content: ""; | ||
+ | height: 40px; | ||
+ | left: 50%; | ||
+ | opacity: inherit; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | transform: translate3d(-50%, -50%, 0); | ||
+ | transform-origin: center; | ||
+ | width: 40px; | ||
+ | will-change: transform; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | </html> | ||
+ | |||
<html> | <html> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<base href="https://2018.igem.org/Team:GO_Paris-Saclay"> | <base href="https://2018.igem.org/Team:GO_Paris-Saclay"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | |||
+ | |||
<div id="bigmaindiv"> | <div id="bigmaindiv"> |
Revision as of 09:18, 8 September 2018
Loading, please wait