how to code an animated ellipsis in Twine?

zanefulton

I'm fairly new to Twine, and I was wondering how to code an animated ellipsis using Harlowe?

greyelf

When asking a question you need to state both the name and version of the Story Format you are using, as answers can be different for each one.

The Pure CSS Animated Ellipsis code snippet will work in all the currently released story formats. The HTML part is placed within a Passage and the CSS part within your story's Story Stylesheet area.

To convert the example to use Harlowe related features I suggest change the CSS to the something like the following:

tw-hook[name="ellipsis"] {
  font-size: 30px;
}

tw-hook[name="ellipsis"]:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

... then use a named hooked named ellipsis to add the effect to text within a Passage.

|ellipsis>[Loading]

NOTE: You can change the attributes values within the CSS selectors to whatever makes sense in your project.