ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-28 00:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Added improved loader.

Browse Source
This commit is contained in:
orangemug
2020-02-17 18:52:16 +00:00
parent f268f09ca2
commit 6be3543616
5 changed files with 230 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.jsx
View File

@@ -12,3 +12,6 @@ ReactDOM.render(
</IconContext.Provider>,
document.querySelector("#app")
);
// Hide the loader.
document.querySelector(".loading").style.display = "none";

82
src/template.html
View File

@@ -9,63 +9,32 @@
html {
background-color: rgb(28, 31, 36);
}
#loader,
#loader:before,
#loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: pulseload 1.8s infinite ease-in-out;
animation: pulseload 1.8s infinite ease-in-out;
}
#loader {
color: #ffffff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#loader:before,
#loader:after {
content: '';
.loading {
text-align: center;
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
.loading__logo svg {
width: 200px;
height: 200px;
}
#loader:after {
left: 3.5em;
}
@-webkit-keyframes pulseload {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes pulseload {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
.loading__text {
font-family: sans-serif;
color: white;
font-size: 1.2em;
padding-bottom: 2em;
}
</style>
</head>
<body>
@@ -150,8 +119,13 @@
</defs>
</svg>
<div id="app">
<div id="loader">Loading...</div>
<div id="app"></div>
<div class="loading">
<div class="loading__logo">
<!-- replaced by 'html-webpack-inline-svg-plugin' -->
<img inline src="node_modules/maputnik-design/logos/logo-animated.svg" />
</div>
<div class="loading__text">Loading&hellip;</div>
</div>
</body>
</html>