Jump to content

Loading custimization

Recommended Posts

Hello everyone !

I'm 10nis, a french student. I'm starting on spacesquare and i didn't succeed to create a loading page on my own. I already have my code but I don't manage to insert it on spacesquare. 
Please someone help me ! I passed all the day navigating on YT trying to find something helpful but I didn't. Here is the HTML and CSS file i'm going to use. 


<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Baffle JS Text Reveal</title>
      <link rel="stylesheet" href="style.css">

      <!-- use cdn for the library / link the library file -->
      <script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script>
      <div class="container">
            <div class="data">Welcome</div>
      <script type="text/javascript">

      const text = baffle(".data");
            characters : '█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█ ░█▒/ ▒▓░ █<░▒ ▓/░>',
            speed: 120



html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      background: #101010;

@font-face {
      src: url('Komoda.otf');

.data {
      color: #fff;
      font-size: 70px;
      letter-spacing: 12px;
      font-weight: 600;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);


Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.