Integrate loading screen using CSS in Harlowe

Twine Version: Harlowe 3.10

I found a simulated zx spectrum loading screen
https://codepen.io/Klapoucius/pen/pmMBYP
which I’d like to integrate into my harlowe game.
I tried using the tag feature in the CSS page but that isn’t working.
And then put the 2 div class lines into a harlowe story passage. No dice tho.
Many thanks x

HTML

<div class="border"></div>
<div class="screen"></div>

CSS

tw-story[tags~="loading"] {
  body {
  height:100vh;
  margin:0;


overflow:hidden;
}

.border {
  animation:colors 10s infinite;
  background-color:blue;
  color:yellow;
  height:100vh;
  overflow:hidden;
  position:relative;
}

.border:before,
.border:after {
  background-image:repeating-linear-gradient(
      transparent,
      transparent 3vh,
      yellow 1vh,
      yellow 4vh
    );  
  content:"";
  height:200%;
  left:0;
  position:absolute;
  top:-100%;
  width:100vw;
}

.border:before {
  animation:downwards 8s ease-in infinite;
}

.border:after {
  animation:downwards 5s ease-out infinite reverse;
}

.screen {
  background-color:#fff;
  height:80vh;
  left:10vw;
  position:fixed;
  top:10vh;
  width:80vw;
}

.screen:after {
  bottom:4vh;
  content:"LOAD\"\"";
  font-family:'Courier New', monospace;
  font-size:4vmin;
  left:4vw;
  position:absolute;
}

@keyframes colors {
  0%, 20% {
    filter:hue-rotate(90deg);
    transform:scale(2);
  }
  20.01%, 100% {
    filter:hue-rotate(0);
    transform:scale(1);
  }
}

@keyframes downwards {
  0% {
    transform:translate(0);
  }
  100% {
    transform:translate(0, 100vh) scale(1.5);
  }
}
  
}
1 Like

What you want to accomplish can be done in Harlowe. It shouldn’t be a problem.

I won’t have time to look at it until much later today though.

That screen animation is so cool! Great find!

1 Like

You can use this in any passage you want and navigate to and from it without issue:

{<style>

/* >>> additional css <<< */

tw-story {
  padding:0;
  margin:0;
  overflow:hidden;
}

.screen {
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:1rem 1.5rem;
  color:black;
  font-weight:bold;
}

.border {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
}

tw-sidebar {
  display:none;
}

/* >>> original css <<< */

.border {
  animation:colors 10s infinite;
  background-color:blue;
  height:100vh;
  overflow:hidden;
}

.border:before,
.border:after {
  background-image:repeating-linear-gradient(
      transparent,
      transparent 3vh,
      yellow 1vh,
      yellow 4vh
    );  
  content:"";
  height:200%;
  left:0;
  position:absolute;
  top:-100%;
  width:100vw;
}

.border:before {
  animation:downwards 8s ease-in infinite;
}

.border:after {
  animation:downwards 5s ease-out infinite reverse;
}

.screen {
  background-color:#fff;
  height:80vh;
  left:10vw;
  position:fixed;
  top:10vh;
  width:80vw;
  font-family:'Courier New', monospace;
}

@keyframes colors {
  0%, 20% {
    filter:hue-rotate(90deg);
    transform:scale(2);
  }
  20.01%, 100% {
    filter:hue-rotate(0);
    transform:scale(1);
  }
}

@keyframes downwards {
  0% {
    transform:translate(0);
  }
  100% {
    transform:translate(0, 100vh) scale(1.5);
  }
}

</style>}

<div class="border"></div>

<div class="screen">
[[ This is a link ->Some Other Passage]]

You can put whatever Harlowe code you want in here.

This works like a regular passage within this div tag.

Loading...
</div>

…by making the screen div tag a flex box, I was able to make all text appear at the bottom. The only other css I had to add was stuff that allowed the div tags to display full screen. This was coded and tested in Harlowe 3.3.3 in the Chrome browser.

I learned a lot figuring this out so it was well worth my time. Enjoy and let me know if you have any questions. Good luck on your project!

1 Like

Thanks so much for looking at this for me. It works just fine in a new harlowe story with a blank CCS page. But I already have this in my CSS for the story I’m working on. (it makes the footer a sidebar)

/* twine-user-stylesheet #1: "UserStylesheet" */
/*
	Reposition the Sidebar 'footer' tagged passage.
*/
tw-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 22%;						/* padding-right of the tw-story element. */
	max-height: 100%;
	margin-top: 5%;					/* padding-top of the tw-story element. */
	padding: 0 0.5em 0.5em 0.5em;
	text-align: center;
	background-color: transparent;
    font-size: 14px;
    line-height: 1.5em;
}
tw-icon {
	text-align: right;
	padding-right: 0.75em;
}

rcorners {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

tw-sidebar .undo, tw-sidebar .redo {
	display: none;
}

I suspect this conflicts with your solution for the loading screen. I’ve tried isolating the loading screen under a passage tag but this results in the loading screen being static and not animated.

@indietiredboi

Do you still want the loading screen to take up the entire page?

If so, you can hide the footer passage temporarily. Otherwise, I need to know more about what you are trying to achieve.

Yes. I’m trying to get just one passage at the start to show the whole screen as a loading screen. But then the rest of the passages to be normal story passages that adhere to the css which turns the footer into a sidebar.

@indietiredboi

If you remove the sidebar CSS code, does the loading screen look proper?

If so, then I can show you an easy way to hide the sidebar/footer just for the loading screen.

If not, then you’ll have to identify what’s conflicting. Parent elements that might be affecting the loading screen code are <tw-passage>, <tw-story>, <body>, and maybe <html>. If you have styled any of those elements, please share that code.

1 Like

Yup. Hiding the footer fixed it. So obvious. Thanks for helping me with that. So pleased with the effect!

1 Like