Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @font-face {
- font-family: 'SpencersFont';
- src: url( 'SpencersFont.ttf' );
- }
- * {
- min-width: 0;
- min-height: 0;
- }
- html, body {
- height: 100%;
- }
- body {
- margin: 0;
- display: flex;
- background: #000;
- user-select: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- overflow: hidden;
- }
- canvas{
- flex: 1;
- outline: none;
- }
- h1 {
- display: inline-block;
- }
- #loading {
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- position: absolute;
- color: #efefef;
- font-size: 24px;
- font-family: sans-serif;
- text-transform: uppercase;
- display: flex;
- flex-flow: column;
- align-items: center;
- justify-content: center;
- /*background: springgreen;*/
- }
- #loading img {
- width: 100%;
- height: 100%;
- image-rendering: pixelated;
- }
- #loading progress {
- background: white;
- border: none;
- width: 50%;
- height: 10px;
- top: 44%;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- position: absolute;
- }
- #loading progress::-webkit-progress-bar {
- background: white;
- }
- #loading progress::-webkit-progress-value {
- background-color: gray;
- }
- #loading progress::-moz-progress-bar {
- background-color: gray;
- }
- #loading .error{
- text-align: center;
- padding: 0 2em;
- }
- @keyframes loadingLetter {
- 0% { transform: translate( 0px, 0px ); opacity: 1; }
- 15% { transform: translate( 0px, -25px ); opacity: 0.36; }
- 25% { transform: translate( 0px, 0px ); opacity: 1; }
- }
- #loadingText {
- width: 50%;
- height: 25%;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- position: absolute;
- text-align: center;
- vertical-align: middle;
- font-family: 'SpencersFont';
- font-size: 1.23em;
- font-weight: normal;
- -webkit-transform: translateZ(0);
- }
- #L {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 0s;
- }
- #O {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 0.35s;
- }
- #A {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 0.7s;
- }
- #D {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 1.05s;
- }
- #I {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 1.4s;
- }
- #N {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 1.75s;
- }
- #G {
- animation-name: loadingLetter;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-delay: 2.1s;
- }
Add Comment
Please, Sign In to add comment