Compare commits

...

6 Commits

Author SHA1 Message Date
ff58e31fe0 Merge branch 'master' into splash-screen-prototype 2020-11-05 10:04:14 -08:00
75bcb6aa04 Merge branch 'master' into splash-screen-prototype 2020-10-28 17:31:48 -07:00
838e2548b5 Merge branch 'master' into splash-screen-prototype 2020-10-23 09:22:18 -07:00
6eaa2ea24d Merge branch 'master' into splash-screen-prototype 2020-09-28 10:10:00 -07:00
9530487acc Refinements to splash screen approach
- CSS added to index.html, removed from inline;
- Added spinner element;
- Hides splash-screen as last-to-load CSS statement;
2020-09-25 16:19:42 -07:00
0bb404adaa quick proto for possible slow loading css issue 2020-09-15 15:16:32 -07:00
3 changed files with 41 additions and 0 deletions

View File

@ -30,6 +30,38 @@
<link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
<link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
<link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
<style type="text/css">
@keyframes splash-spinner {
0% {
transform: translate(-50%, -50%) rotate(0deg); }
100% {
transform: translate(-50%, -50%) rotate(360deg); } }
#splash-screen {
background-color: black;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10000;
}
#splash-screen:before {
animation-name: splash-spinner;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius: 50%;
border-color: rgba(255,255,255,0.25);
border-top-color: white;
border-style: solid;
border-width: 10px;
content: '';
display: block;
opacity: 0.25;
position: absolute;
left: 50%; top: 50%;
height: 100px; width: 100px;
}
</style>
</head>
<body>
</body>

View File

@ -47,3 +47,7 @@
@import "../ui/toolbar/components/toolbar-checkbox.scss";
@import "./notebook.scss";
@import "../plugins/notebook/components/sidebar.scss";
#splash-screen {
display: none;
}

View File

@ -5,6 +5,11 @@
'is-editing': isEditing
}"
>
<div
id="splash-screen"
></div>
<div
class="l-shell__head"
:class="{