Added preloader to hide elements before they are correctly rendered
This commit is contained in:
n1474335
parent
e0e5670d0e
commit
a4d93f23d6
|
|
@ -52,6 +52,23 @@ App.prototype.setup = function() {
|
|||
this.resetLayout();
|
||||
this.setCompileMessage();
|
||||
this.loadURIParams();
|
||||
this.loaded();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Fires once all setup activities have completed.
|
||||
*/
|
||||
App.prototype.loaded = function() {
|
||||
// Trigger CSS animations to remove preloader
|
||||
document.body.classList.add("loaded");
|
||||
|
||||
// Wait for animations to complete then remove the preloader and loaded style
|
||||
// so that the animations for existing elements don't play again.
|
||||
setTimeout(function() {
|
||||
document.getElementById("loader-wrapper").remove();
|
||||
document.body.classList.remove("loaded");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,11 @@
|
|||
<link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Preloader overlay -->
|
||||
<div id="loader-wrapper">
|
||||
<div id="preloader"></div>
|
||||
</div>
|
||||
<!-- End preloader overlay -->
|
||||
<span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
|
||||
<div id="alert" class="alert alert-danger">
|
||||
<button type="button" class="close" id="alert-close">×</button>
|
||||
|
|
|
|||
|
|
@ -11,3 +11,33 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: $secondaryBackgroundColour;
|
||||
border-bottom: 1px solid $secondaryBorderColour;
|
||||
font-weight: $titleWeight;
|
||||
}
|
||||
|
||||
.category-title[href='#catFavourites'] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title[aria-expanded=true] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title.collapsed {
|
||||
border-bottom-color: $secondaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title:hover {
|
||||
color: $opListOperationFontColour;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -10,36 +10,6 @@
|
|||
@extend .list-area;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: $secondaryBackgroundColour;
|
||||
border-bottom: 1px solid $secondaryBorderColour;
|
||||
font-weight: $titleWeight;
|
||||
}
|
||||
|
||||
.category-title[href='#catFavourites'] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title[aria-expanded=true] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title.collapsed {
|
||||
border-bottom-color: $secondaryBorderColour;
|
||||
}
|
||||
|
||||
.category-title:hover {
|
||||
color: $opListOperationFontColour;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.op-list .operation {
|
||||
color: $opListOperationFontColour;
|
||||
background-color: $opListOperationBgColour;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
|
||||
// CyberChef styles
|
||||
// Theme
|
||||
// Default theme
|
||||
@import "themes/_classic";
|
||||
|
||||
// Utilities
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
@import "utils/_overrides";
|
||||
@import "utils/_general";
|
||||
|
||||
// Preloader styles
|
||||
@import "preloader.scss";
|
||||
|
||||
// Components
|
||||
@import "components/_alert";
|
||||
@import "components/_button";
|
||||
|
|
|
|||
153
src/web/stylesheets/preloader.scss
Normal file
153
src/web/stylesheets/preloader.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* Preloader styles
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background-color: $secondaryBorderColour;
|
||||
}
|
||||
|
||||
#preloader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #3498db;
|
||||
border-radius: 50%;
|
||||
z-index: 1500;
|
||||
|
||||
@include animation(spin 2s linear infinite);
|
||||
}
|
||||
|
||||
.loader-arm {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#preloader:before {
|
||||
@extend .loader-arm;
|
||||
border-top-color: #e74c3c;
|
||||
@include animation(spin 3s linear infinite);
|
||||
}
|
||||
|
||||
#preloader:after {
|
||||
@extend .loader-arm;
|
||||
border-top-color: #f9c922;
|
||||
@include animation(spin 1.5s linear infinite);
|
||||
}
|
||||
|
||||
|
||||
/* Loaded */
|
||||
.loaded #preloader {
|
||||
opacity: 0;
|
||||
@include transition(all 0.3s ease-out);
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
opacity: 0;
|
||||
@include transition(all 0.5s 0.3s ease-out);
|
||||
}
|
||||
|
||||
.loaded #rec-list li {
|
||||
@include animation(bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both);
|
||||
}
|
||||
|
||||
.loaded #content-wrapper {
|
||||
animation-delay: 0.10s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:first-child {
|
||||
animation-delay: 0.20s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(2) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(3) {
|
||||
animation-delay: 0.30s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(4) {
|
||||
animation-delay: 0.35s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(5) {
|
||||
animation-delay: 0.40s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(6) {
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(7) {
|
||||
animation-delay: 0.50s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(8) {
|
||||
animation-delay: 0.55s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(9) {
|
||||
animation-delay: 0.60s;
|
||||
}
|
||||
|
||||
.loaded #rec-list li:nth-child(10) {
|
||||
animation-delay: 0.65s;
|
||||
}
|
||||
|
||||
|
||||
// Animations
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
@include rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
@include rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes bump {
|
||||
from {
|
||||
opacity: 0;
|
||||
@include translate3d(0, 200px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bump {
|
||||
from {
|
||||
opacity: 0;
|
||||
@include translate3d(0, 200px, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -72,6 +72,14 @@ $argBackground: #fff;
|
|||
$argDisabledBackground: #eee;
|
||||
|
||||
|
||||
// Highlighter colours
|
||||
$hl1: #fff000;
|
||||
$hl2: #95dfff;
|
||||
$hl3: #ffb6b6;
|
||||
$hl4: #fcf8e3;
|
||||
$hl5: #8de768;
|
||||
|
||||
|
||||
// Misc.
|
||||
$dropFileBorderColour: #3a87ad;
|
||||
|
||||
|
|
@ -81,10 +89,3 @@ $bannerBgColour: #dff0d8;
|
|||
$scrollbarTrack: $secondaryBackgroundColour;
|
||||
$scrollbarThumb: #ccc;
|
||||
$scrollbarHover: #bbb;
|
||||
|
||||
// Highlighter colours
|
||||
$hl1: #fff000;
|
||||
$hl2: #95dfff;
|
||||
$hl3: #ffb6b6;
|
||||
$hl4: #fcf8e3;
|
||||
$hl5: #8de768;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ body {
|
|||
}
|
||||
|
||||
.konami {
|
||||
@include transform(180deg);
|
||||
@include rotate(180deg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,40 @@
|
|||
user-select: $value;
|
||||
}
|
||||
|
||||
@mixin transform($value) {
|
||||
@mixin rotate($value) {
|
||||
-ms-transform: rotate($value);
|
||||
-webkit-transform: rotate($value);
|
||||
-moz-transform: rotate($value);
|
||||
transform: rotate($value);
|
||||
}
|
||||
|
||||
@mixin translateX($value) {
|
||||
-ms-transform: translateX($value);
|
||||
-webkit-transform: translateX($value);
|
||||
-moz-transform: translateX($value);
|
||||
transform: translateX($value);
|
||||
}
|
||||
|
||||
@mixin translateY($value) {
|
||||
-ms-transform: translateY($value);
|
||||
-webkit-transform: translateY($value);
|
||||
-moz-transform: translateY($value);
|
||||
transform: translateY($value);
|
||||
}
|
||||
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-ms-transform: translate3d($x, $y, $z);
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
-moz-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin transition($value) {
|
||||
-webkit-transition: $value;
|
||||
transition: $value;
|
||||
}
|
||||
|
||||
@mixin animation($value) {
|
||||
-webkit-animation: $value;
|
||||
animation: $value;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue