Permalink
Browse files

New Loading Screen

  • Loading branch information...
1 parent f426713 commit d79fa0068561ac77702931f7109f0e6db5068ea0 @saenzramiro committed Sep 26, 2016
View
@@ -113,7 +113,10 @@
{
"path": "resources/js/GALocalStorage.js"
},
- {
+ {
+ "path": "resources/js/loadscreen.js"
+ },
+ {
"path": "env.js"
},
{
View
@@ -21,6 +21,14 @@
<!--- Tooltip player -->
</head>
<body>
- <div id="spinner" class='uil-ring-css' style='transform:scale(1);'><div></div></div>
+ <div id="spinner" class="component" data-path-start="M280,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
+C279.572,482.992,266.307,496,250,496h-2.125H51.625H50c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
+C20.001,466.239,20,466.119,20,466l0,0c0-0.141,0.001-0.281,0.003-0.422C20.228,449.206,33.573,436,50,436h1.625h196.25H250
+c16.438,0,29.787,13.222,29.997,29.608C279.999,465.738,280,465.869,280,466L280,466z" data-path-listen="M181,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
+C180.572,482.992,167.307,496,151,496h-2.125h2.75H150c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
+C120.001,466.239,120,466.119,120,466l0,0c0-0.141,0.001-0.281,0.003-0.422C120.228,449.206,133.573,436,150,436h1.625h-2.75H151
+c16.438,0,29.787,13.222,29.997,29.608C180.999,465.738,181,465.869,181,466L181,466z" data-path-player="M290,40c0,0.13-0.001,380.26-0.003,380.39c-0.002,0.134,0.006,24.479,0.003,24.609 c0,3.095-2.562,5.001-5,5.001h-27.125H41.625H15c-1.875,0-5-1.25-5-5.001c-0.003-0.13,0.004-24.509,0.003-24.641 C10.001,420.239,10,40.119,10,40l0,0c0-0.141-0.002-24.859,0-25c0,0,0-5,5-5h26.625h216.25H285c2.438,0,5,1.906,5,5 C290.002,15.13,290,39.869,290,40L290,40z">
+ <div class="button button--start uil-ring-css" style="transform:scale(1);"><div></div></div>
+ </div>
</body>
</html>
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xea83;" glyph-name="mail" d="M853.31 960h-682.62c-93.88 0-170.69-76.784-170.69-170.658v-682.656c0-93.876 76.81-170.686 170.69-170.686h682.622c93.938 0 170.688 76.81 170.688 170.686v682.656c0 93.874-76.75 170.658-170.69 170.658zM256 704h512c9.138 0 18.004-1.962 26.144-5.662l-282.144-329.168-282.144 329.17c8.14 3.696 17.006 5.66 26.144 5.66zM192 256v384c0 1.34 0.056 2.672 0.14 4l187.664-218.94-185.598-185.6c-1.444 5.338-2.206 10.886-2.206 16.54zM768 192h-512c-5.654 0-11.202 0.762-16.54 2.206l182.118 182.118 90.422-105.496 90.424 105.494 182.116-182.118c-5.34-1.442-10.886-2.204-16.54-2.204zM832 256c0-5.654-0.762-11.2-2.206-16.54l-185.598 185.598 187.664 218.942c0.084-1.328 0.14-2.66 0.14-4v-384z" />
+<glyph unicode="&#xea8e;" glyph-name="hangouts" d="M511.8 960c-244.2 0-442.2-198-442.2-442.2 0-231.4 210.8-419 442.2-419v-162.8c268.6 136.2 442.6 355.6 442.6 581.8 0 244.2-198.4 442.2-442.6 442.2zM448 448c0-53-28.6-96-64-96v96h-128v192h192v-192zM768 448c0-53-28.6-96-64-96v96h-128v192h192v-192z" />
+<glyph unicode="&#xea91;" glyph-name="facebook2" d="M928 960h-832c-52.8 0-96-43.2-96-96v-832c0-52.8 43.2-96 96-96h416v448h-128v128h128v64c0 105.8 86.2 192 192 192h128v-128h-128c-35.2 0-64-28.8-64-64v-64h192l-32-128h-160v-448h288c52.8 0 96 43.2 96 96v832c0 52.8-43.2 96-96 96z" />
+<glyph unicode="&#xea93;" glyph-name="whatsapp" d="M873 811.2c-95.8 96-223.2 148.8-359 148.8-279.6 0-507.2-227.6-507.2-507.4 0-89.4 23.4-176.8 67.8-253.6l-72-263 269 70.6c74.2-40.4 157.6-61.8 242.4-61.8h0.2c0 0 0 0 0 0 279.6 0 507.4 227.6 507.4 507.4 0 135.6-52.8 263-148.6 359zM514.2 30.4v0c-75.8 0-150 20.4-214.8 58.8l-15.4 9.2-159.6-41.8 42.6 155.6-10 16c-42.4 67-64.6 144.6-64.6 224.4 0 232.6 189.2 421.8 422 421.8 112.6 0 218.6-44 298.2-123.6 79.6-79.8 123.4-185.6 123.4-298.4-0.2-232.8-189.4-422-421.8-422zM745.4 346.4c-12.6 6.4-75 37-86.6 41.2s-20 6.4-28.6-6.4c-8.4-12.6-32.8-41.2-40.2-49.8-7.4-8.4-14.8-9.6-27.4-3.2s-53.6 19.8-102 63c-37.6 33.6-63.2 75.2-70.6 87.8s-0.8 19.6 5.6 25.8c5.8 5.6 12.6 14.8 19 22.2s8.4 12.6 12.6 21.2c4.2 8.4 2.2 15.8-1 22.2s-28.6 68.8-39 94.2c-10.2 24.8-20.8 21.4-28.6 21.8-7.4 0.4-15.8 0.4-24.2 0.4s-22.2-3.2-33.8-15.8c-11.6-12.6-44.4-43.4-44.4-105.8s45.4-122.6 51.8-131.2c6.4-8.4 89.4-136.6 216.6-191.4 30.2-13 53.8-20.8 72.2-26.8 30.4-9.6 58-8.2 79.8-5 24.4 3.6 75 30.6 85.6 60.2s10.6 55 7.4 60.2c-3 5.6-11.4 8.8-24.2 15.2z" />
+<glyph unicode="&#xea95;" glyph-name="telegram" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM763.6 609l-84-395.8c-5.8-28.2-22.8-34.8-46.4-21.8l-128 94.6-61.4-59.8c-7.2-7-12.8-12.8-25.6-12.8-16.6 0-13.8 6.2-19.4 22l-43.6 143.2-126.6 39.4c-27.4 8.4-27.6 27.2 6.2 40.6l493.2 190.4c22.4 10.2 44.2-5.4 35.6-40z" />
+<glyph unicode="&#xea96;" glyph-name="twitter" d="M1024 733.6c-37.6-16.8-78.2-28-120.6-33 43.4 26 76.6 67.2 92.4 116.2-40.6-24-85.6-41.6-133.4-51-38.4 40.8-93 66.2-153.4 66.2-116 0-210-94-210-210 0-16.4 1.8-32.4 5.4-47.8-174.6 8.8-329.4 92.4-433 219.6-18-31-28.4-67.2-28.4-105.6 0-72.8 37-137.2 93.4-174.8-34.4 1-66.8 10.6-95.2 26.2 0-0.8 0-1.8 0-2.6 0-101.8 72.4-186.8 168.6-206-17.6-4.8-36.2-7.4-55.4-7.4-13.6 0-26.6 1.4-39.6 3.8 26.8-83.4 104.4-144.2 196.2-146-72-56.4-162.4-90-261-90-17 0-33.6 1-50.2 3 93.2-59.8 203.6-94.4 322.2-94.4 386.4 0 597.8 320.2 597.8 597.8 0 9.2-0.2 18.2-0.6 27.2 41 29.4 76.6 66.4 104.8 108.6z" />
+<glyph unicode="&#xea98;" glyph-name="vk" d="M928 960h-832c-52.8 0-96-43.2-96-96v-832c0-52.8 43.2-96 96-96h832c52.8 0 96 43.2 96 96v832c0 52.8-43.2 96-96 96zM829.4 243.2l-93.6-1.4c0 0-20.2-4-46.6 14.2-35 24-68 86.6-93.8 78.4-26-8.2-25.2-64.4-25.2-64.4s0.2-12-5.8-18.4c-6.4-7-19.2-8.4-19.2-8.4h-41.8c0 0-92.4-5.6-173.8 79.2-88.8 92.4-167.2 275.8-167.2 275.8s-4.6 12 0.4 17.8c5.6 6.6 20.6 7 20.6 7l100.2 0.6c0 0 9.4-1.6 16.2-6.6 5.6-4 8.6-11.8 8.6-11.8s16.2-41 37.6-78c41.8-72.2 61.4-88 75.6-80.4 20.6 11.2 14.4 102.2 14.4 102.2s0.4 33-10.4 47.6c-8.4 11.4-24.2 14.8-31 15.6-5.6 0.8 3.6 13.8 15.6 19.8 18 8.8 49.8 9.4 87.4 9 29.2-0.2 37.8-2.2 49.2-4.8 34.6-8.4 22.8-40.6 22.8-117.8 0-24.8-4.4-59.6 13.4-71 7.6-5 26.4-0.8 73.4 79 22.2 37.8 39 82.2 39 82.2s3.6 8 9.2 11.4c5.8 3.4 13.6 2.4 13.6 2.4l105.4 0.6c0 0 31.6 3.8 36.8-10.6 5.4-15-11.8-50-54.8-107.4-70.6-94.2-78.6-85.4-19.8-139.8 56-52 67.6-77.4 69.6-80.6 22.8-38.4-26-41.4-26-41.4z" />
+<glyph unicode="&#xea9f;" glyph-name="twitch" d="M96 960l-96-160v-736h256v-128h128l128 128h160l288 288v608h-864zM832 416l-160-160h-160l-128-128v128h-192v576h640v-416zM608 704h96v-256h-96v256zM416 704h96v-256h-96v256z" />
+<glyph unicode="&#xeaad;" glyph-name="steam2" d="M303.922 123.99c27.144 0 53.786 13.136 69.972 37.416 25.734 38.602 15.302 90.754-23.298 116.488l-66.074 44.048c11.308 3.080 23.194 4.756 35.478 4.756 74.392 0 134.696-60.304 134.696-134.698s-60.306-134.698-134.698-134.698c-72.404 0-131.444 57.132-134.548 128.774l71.954-47.968c14.322-9.548 30.506-14.118 46.518-14.118zM853.34 960c93.876 0 170.66-76.812 170.66-170.688v-682.628c0-93.936-76.784-170.684-170.66-170.684h-682.652c-93.876 0-170.688 76.75-170.688 170.682v203.028l121.334-80.888c-11.652-63.174 6.938-130.83 55.798-179.69 78.904-78.904 206.83-78.904 285.736 0 48.468 48.466 67.15 115.43 56.076 178.166l249.056 222.988c46.248 6.638 90.816 27.744 126.394 63.322 87.476 87.476 87.476 229.306 0 316.784-87.48 87.478-229.308 87.478-316.786 0-35.578-35.578-56.684-80.146-63.322-126.392v0l-204.694-310.23c-31.848-1.632-63.378-10.764-91.726-27.392l-217.866 145.244v277.69c0 93.876 76.81 170.688 170.686 170.688h682.654zM896 672c0 88.366-71.634 160-160 160s-160-71.634-160-160 71.634-160 160-160 160 71.634 160 160zM640 672c0 53.020 42.98 96 96 96s96-42.98 96-96-42.98-96-96-96-96 42.98-96 96z" />
+<glyph unicode="&#xeac5;" glyph-name="skype" d="M425.6 922.6c-1.6 1-3.4 1.8-5 2.6-1.8-0.4-3.4-0.6-5.2-1l10.2-1.6zM36.8 539c-0.4-1.8-0.6-3.6-0.8-5.2 1-1.6 1.6-3.2 2.6-4.8l-1.8 10zM986.8 357.4c0.4 1.8 0.6 3.6 1 5.4-1 1.6-1.6 3.2-2.6 4.8l1.6-10.2zM592-23c1.6-1 3.4-1.8 5-2.6 1.8 0.4 3.6 0.6 5.4 0.8l-10.4 1.8zM987.8 362.8c-0.4-1.8-0.6-3.6-1-5.4l-1.8 10.4c1-1.8 1.8-3.4 2.8-5 5.2 28.8 8 58.2 8 87.6 0 65.2-12.8 128.6-38 188.2-24.4 57.6-59.2 109.4-103.6 153.8s-96.2 79.2-153.6 103.6c-59.6 25.2-123 38-188.2 38-30.8 0-61.6-2.8-91.6-8.6 0 0-0.2 0-0.2 0 1.6-0.8 3.4-1.6 5-2.6l-10.2 1.6c1.8 0.4 3.4 0.6 5.2 1-41.2 21.8-87.4 33.6-134.2 33.6-76.4 0-148.4-29.8-202.4-83.8s-83.8-126-83.8-202.4c0-48.6 12.6-96.6 36-138.8 0.4 1.8 0.6 3.6 0.8 5.2l1.8-10.2c-1 1.6-1.8 3.2-2.6 4.8-4.8-27.4-7.2-55.4-7.2-83.4 0-65.2 12.8-128.6 38-188.2 24.4-57.6 59.2-109.2 103.6-153.6s96.2-79.2 153.8-103.6c59.6-25.2 123-38 188.2-38 28.4 0 56.8 2.6 84.6 7.6-1.6 1-3.2 1.8-5 2.6l10.4-1.8c-1.8-0.4-3.6-0.6-5.4-0.8 42.8-24.2 91.4-37.2 140.8-37.2 76.4 0 148.4 29.8 202.4 83.8s83.8 126 83.8 202.4c-0.2 48.6-12.8 96.6-36.4 139.2zM514.2 154.2c-171.8 0-248.6 84.4-248.6 147.8 0 32.4 24 55.2 57 55.2 73.6 0 54.4-105.6 191.6-105.6 70.2 0 109 38.2 109 77.2 0 23.4-11.6 49.4-57.8 60.8l-152.8 38.2c-123 30.8-145.4 97.4-145.4 160 0 129.8 122.2 178.6 237 178.6 105.8 0 230.4-58.4 230.4-136.4 0-33.4-29-52.8-62-52.8-62.8 0-51.2 86.8-177.6 86.8-62.8 0-97.4-28.4-97.4-69s49.6-53.6 92.6-63.4l113.2-25.2c123.8-27.6 155.2-100 155.2-168 0-105.4-81-184.2-244.4-184.2z" />
+<glyph unicode="&#xeac7;" glyph-name="hackernews" d="M0 960v-1024h1024v1024h-1024zM544 376v-216h-64v216l-175 328h72.6l134.4-252 134.4 252h72.6l-175-328z" />
+</font></defs></svg>
@@ -0,0 +1,229 @@
+/* Main component wrapper */
+body {
+ overflow: hidden;
+}
+.component {
+ position: absolute;;
+ z-index: 1;
+ width: 200px;
+ height: 200px;
+ margin: -100px 0 0 -100px;
+ top: 50%;
+ left: 50%;
+}
+
+
+/* Actual buttons (laid over shapes) */
+
+.button {
+ font-weight: bold;
+ position: absolute;
+ bottom: 4px;
+ top: 50%;
+ left: 50%;
+ width: 200px;
+ height: 200px;
+ margin: -100px 0 0 -100px;
+ padding: 0;
+ text-align: center;
+ color: #00a7e7;
+ border: none;
+ background: none;
+ -webkit-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.button:hover,
+.button:focus {
+ outline: none;
+ color: #048abd;
+}
+
+.button--listen {
+ pointer-events: none;
+}
+
+.button--close {
+ z-index: 10;
+ top: 0px;
+ right: 0px;
+ left: auto;
+ width: 40px;
+ height: 40px;
+ padding: 10px;
+ color: #fff;
+}
+
+.button--close:hover,
+.button--close:focus {
+ color: #ddd;
+}
+
+.button--hidden {
+ pointer-events: none;
+ opacity: 0;
+}
+
+
+/* Inner content of the start/*/
+
+.button__content {
+ position: absolute;
+ opacity: 0;
+ -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+ transition: transform 0.4s, opacity 0.4s;
+}
+
+.button__content--listen {
+ font-size: 1.75em;
+ line-height: 64px;
+ bottom: 0;
+ left: 50%;
+ width: 60px;
+ height: 60px;
+ margin: 0 0 0 -30px;
+ border-radius: 50%;
+ -webkit-transform: translate3d(0, 25px, 0);
+ transform: translate3d(0, 25px, 0);
+ -webkit-transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+ transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+}
+
+.button__content--listen::before,
+.button__content--listen::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ opacity: 0;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 50%;
+}
+
+.button--animate .button__content--listen::before,
+.button--animate .button__content--listen::after {
+ -webkit-animation: anim-ripple 1.2s ease-out infinite forwards;
+ animation: anim-ripple 1.2s ease-out infinite forwards;
+}
+
+.button--animate .button__content--listen::after {
+ -webkit-animation-delay: 0.6s;
+ animation-delay: 0.6s;
+}
+
+@-webkit-keyframes anim-ripple {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(3, 3, 1);
+ transform: scale3d(3, 3, 1);
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes anim-ripple {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(3, 3, 1);
+ transform: scale3d(3, 3, 1);
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.notes {
+ position: absolute;
+ z-index: -1;
+ bottom: 0;
+ left: 50%;
+ width: 200px;
+ height: 100px;
+ margin: 0 0 0 -100px;
+}
+
+.note {
+ font-size: 2.8em;
+ position: absolute;
+ left: 50%;
+ width: 1em;
+ margin: 0 0 0 -0.5em;
+ opacity: 0;
+ color: rgba(255, 255, 255, 0.75);
+}
+
+.note:nth-child(odd) {
+ color: rgba(0, 0, 0, 0.1);
+}
+
+.note:nth-child(4n) {
+ font-size: 2em;
+}
+
+.note:nth-child(6n) {
+ color: rgba(255, 255, 255, 0.3);
+}
+
+/* ICONS */
+@font-face {
+ font-family: 'icomoon';
+ src:url('../resources/fonts/icomoon/icomoon.eot?4djz1y');
+ src:url('../resources/fonts/icomoon/icomoon.eot?4djz1y#iefix') format('embedded-opentype'),
+ url('../resources/fonts/icomoon/icomoon.ttf?4djz1y') format('truetype'),
+ url('../resources/fonts/icomoon/icomoon.woff?4djz1y') format('woff'),
+ url('../resources/fonts/icomoon/icomoon.svg?4djz1y#icomoon') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon {
+ font-family: 'icomoon';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
+.icon--microphone:before {
+ content: "\ea95";
+}
+.icon--cross:before {
+ content: "\e90c";
+}
+.icon--note1:before {
+ content: "\ea83";
+}
+.icon--note2:before {
+ content: "\eaad";
+}
+.icon--note3:before {
+ content: "\eac5";
+}
+.icon--note4:before {
+ content: "\ea93";
+}
+.icon--note5:before {
+ content: "\ea95";
+}
+.icon--note6:before {
+ content: "\ea96";
+}
@@ -1,6 +1,7 @@
@import url(../resources/fonts/font-awesome/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,700italic,700,500italic,500,400italic);
+@import 'loadscreen';
$base-color: #2E658E;
$font-family: 'Roboto', sans-serif;
Oops, something went wrong.

0 comments on commit d79fa00

Please sign in to comment.