This repository has been archived by the owner on Apr 21, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
loading-animation.html
60 lines (60 loc) · 8.83 KB
/
loading-animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Loading Animation - Animations vs. Perceived Performance</title>
<meta name="description" content="Loading Animation - Animations vs. Perceived Performance">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}blockquote,body,caption,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,legend,ol,p,pre,table,td,th,ul{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}ins,u{text-decoration:none}ins{border-bottom:1px solid}html{box-sizing:border-box}html *,html :after,html :before{box-sizing:inherit}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1.3rem}dd,ol,ul{margin-left:1rem}h1,h2{color:#fff;font-weight:700;line-height:1.375;margin:0 0 2rem}h1{font-size:4rem}h2{font-size:2rem}a{color:#ef4c23;text-decoration:underline}a:hover{color:#fff}li{margin-bottom:.5rem}li>ol,li>ul{margin-bottom:0;margin-left:1rem;margin-top:.5rem}dt{font-weight:700}dd{margin-bottom:1rem;margin-left:1rem}html{background:#fff;color:#fff;font-family:Tahoma,Geneva,sans-serif;font-size:.875rem;line-height:2;padding:1rem}@media only screen and (min-width:768px){html{font-size:1em}}@media only screen and (min-width:1024px){html{font-size:1.125em}}@media only screen and (min-width:1600px){html{font-size:1.25em}}body{padding:1rem}.o-list-bare{list-style:none;margin:0;padding:0}.c-header,.c-hero{position:relative}.c-hero{background:#231f20;height:0;overflow:hidden;padding-top:67%}.c-hero:after{background:#231f20;content:"";left:0;opacity:.4;top:0;z-index:1}.c-hero:after,.c-hero__logo{height:100%;position:absolute;width:100%}.c-hero__logo{left:50%;max-height:300px;max-width:300px;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}@media only screen and (min-width:768px){.c-hero__logo{max-width:400px;max-height:400px}}@media only screen and (min-width:1024px){.c-hero__logo{max-width:500px;max-height:500px}}@media only screen and (min-width:1600px){.c-hero__logo{max-width:700px;max-height:700px}}.c-hero__fill--no-animation.src-image-loaded{display:none}.c-hero__fill--partial-animation.src-image-loaded{opacity:0;-webkit-transition:opacity 3s;transition:opacity 3s}.c-hero__image{display:block;height:100%;left:0;position:absolute;top:0;width:auto}.c-hero__image--partial-animation{opacity:0}.c-hero__image--partial-animation.is-loaded{opacity:1;-webkit-transition:opacity 3s;transition:opacity 3s}.is-loading .c-hero__image,.is-loading .c-hero__logo,.is-loading .c-logo,.is-loading .c-main-nav,.is-loading .c-page-title{opacity:0}.is-loading .c-loading__loader{display:block}.is-loaded .c-hero__image,.is-loaded .c-hero__logo,.is-loaded .c-logo,.is-loaded .c-main-nav,.is-loaded .c-page-title{opacity:1;-webkit-transition:opacity 1s;transition:opacity 1s}.c-loading__loader{-webkit-animation:a 2s ease-out infinite;animation:a 2s ease-out infinite;display:none;left:50%;opacity:.3;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}@-webkit-keyframes a{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}@keyframes a{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}.c-logo{display:block;left:3rem;position:absolute;top:2rem;z-index:2}.c-logo__image{width:50px}@media only screen and (min-width:768px){.c-logo__image{width:60px}}@media only screen and (min-width:1024px){.c-logo__image{width:70px}}@media only screen and (min-width:1600px){.c-logo__image{width:80px}}.c-main-nav{position:absolute;right:3rem;top:2rem;z-index:2}.c-main-nav__items{margin:0}.c-main-nav__item{display:inline-block;list-style-type:none;margin-left:1rem}@media only screen and (min-width:768px){.c-main-nav__item{margin-left:2rem}}@media only screen and (min-width:1024px){.c-main-nav__item{margin-left:3rem}}.c-main-nav__link{color:#fff;font-size:.9rem;font-weight:700;text-decoration:none;text-transform:uppercase}.c-main-nav__link:hover{color:#ef4c23}.c-page-title{left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:100%;z-index:2;text-align:center}.c-page-title__main{font-size:2rem;font-weight:700;line-height:1.2;text-align:center;text-transform:uppercase}@media only screen and (min-width:1024px){.c-page-title__main{font-size:3rem}}.c-page-title__main em{font-family:Georgia,serif;color:#ef4c23;font-weight:400;text-transform:lowercase}.c-page-title__main--narrow{width:80%;margin:0 auto}.c-page-title__list{font-size:1.25rem;display:inline-block;font-weight:400;text-align:left}
/*# sourceMappingURL=main.min.css.map */</style>
<link href="favicon.ico" rel="icon">
</head>
<body class="is-loading">
<header class="c-header" >
<a href="/" rel="home" class="c-logo"><img src="dist/img/xfive.svg" alt="Xfive" class="c-logo__image"></a>
<nav class="c-main-nav">
<ul class="c-main-nav__items">
<li class="c-main-nav__item">
<a class="c-main-nav__link" href="#">About</a>
</li>
<li class="c-main-nav__item">
<a class="c-main-nav__link" href="#">Team</a>
</li>
<li class="c-main-nav__item">
<a class="c-main-nav__link" href="#">Work</a>
</li>
<li class="c-main-nav__item">
<a class="c-main-nav__link" href="#">Blog</a>
</li>
</ul>
</nav>
<!-- /.c-main-nav -->
</header>
<!-- /.c-header -->
<main>
<div class="c-hero">
<div class="c-loading__loader">
Loading ...
</div>
<div class="c-page-title">
<h1 class="c-page-title__main">Developers who <em>care</em></h1>
</div>
<div class="c-hero__logo">
<svg class="c-hero__mask" viewBox="0 0 1024 1024">
<image clip-path="url(#logo-mask)" height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/img/hero-home.jpg" class="js-image-load" data-target=".c-hero__fill"></image>
<rect clip-path="url(#logo-mask)" class="c-hero__fill c-hero__fill--no-animation" height="100%" width="100%" fill="#ef4c23"></rect>
<clippath id="logo-mask">
<title>X</title>
<path data-min-y="0" data-max-y="200" class="path1" d="M958.080 246.88l28.384-28.352c49.984-49.984 49.984-131.104 0-181.088-49.952-49.952-130.944-49.952-180.928 0l-217.312 217.248 181.12 180.992 188.736-188.8z"></path>
<path data-min-y="0" data-max-y="200" class="path2" d="M896.032 714.912v0.064l-126.624-126.528-180.992 180.896 217.024 217.12c50.080 50.016 131.168 50.016 181.056 0 49.984-49.984 49.984-131.104 0-180.992l-90.464-90.56z"></path>
<path data-min-y="0" data-max-y="200" class="path3" d="M693.024 512l1.248-1.248-475.712-473.28c-50.016-49.984-131.104-49.984-180.992 0-50.016 49.984-50.016 131.040 0 180.992l293.44 293.536-293.44 293.504c-50.016 49.952-50.016 131.008 0 180.992 49.984 49.984 130.976 49.984 180.992 0l37.472-37.568 438.336-435.68-1.344-1.248z"></path>
</clippath>
</svg>
</div>
<!-- / .c-hero__logo -->
</div>
<!-- / .c-hero -->
</main>
<script src="dist/js/bundle.js" async></script>
</body>
</html>