Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading gif -- before the comment iframe loaded #198

Closed
rizkysyaiful opened this issue Sep 9, 2019 · 2 comments
Closed

Loading gif -- before the comment iframe loaded #198

rizkysyaiful opened this issue Sep 9, 2019 · 2 comments
Labels

Comments

@rizkysyaiful
Copy link

@rizkysyaiful rizkysyaiful commented Sep 9, 2019

This is the one of the last two things that Utterances needs to beat Disqus & friends.

@jdanyow jdanyow added the enhancement label Sep 28, 2019
@Jakeler

This comment has been minimized.

Copy link

@Jakeler Jakeler commented Mar 3, 2020

For now i use the trick with a loading icon in the background, after the iframe is rendered it is invisible, because the comment block is on top. Like this in HTML:

<p class="comments">
    <svg class="loading">
        <use xlink:href="/static/fontawesome/solid.svg#spinner"></use>
    </svg>
    <script src="https://utteranc.es/client.js" ... >
    </script>
</p>

And in SASS/CSS:

p.comments {
  position: relative;

  div.utterances {
    position: absolute;
    top: 0;
  }
  
  svg.loading {
    display: block;
    z-index: -1;
    min-height: 10em;
    margin: auto;
    animation: spin infinite 1s;
  }
  
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }
}

You can see the result on my blog, for example here: https://blog.ja-ke.tech/about/

@rizkysyaiful

This comment has been minimized.

Copy link
Author

@rizkysyaiful rizkysyaiful commented Mar 16, 2020

Cool! Approved. :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.