Reading Progress + Social Share

Running Ghost Pro + Lyra Theme

URL: https://appsntips.com/

Can anybody let me know how can this reading progress bar and social share can be implemented in Lyra.

Screenshot taken from here (https://ghost.org/changelog/markdown/)

Hi @reckless,

implementation is straight forward in lyra theme.

Ghost has a tutorial for implementing a progress bar:

Social Share could look something like this (of course you should remove the inline css and <style> and paste it into your screen.css accordingly):

<div id="social-container">
                <div>Share this<svg viewBox="0 0 24 24"
                        style="width: 18px; height: 18px;transform: rotate(90deg)">
                        <path
                            d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2">
                        </path>
                    </svg></div>
                <a href="https://facebook.com/sharer/sharer.php?u={{url absolute="true"}}" target="_blank"
                    rel="noopener" class="platform facebook" title="Auf Facebook teilen">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img">
                        <g>
                            <path
                                d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z"
                                fill-rule="evenodd"></path>
                        </g>
                    </svg>
                </a>
                <a href="https://twitter.com/intent/tweet/?text={{title}}{{#if @site.twitter}} via {{@site.twitter}}{{/if}}&url={{url absolute="true"}}"
                    target="_blank" rel="noopener" class="platform twitter" title="Auf Twitter teilen">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img">
                        <g>
                            <path
                                d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336"
                                fill-rule="evenodd"></path>
                        </g>
                    </svg>
                </a>
            </div>

<style>
#social-container {
  animation-name: slideIn;
  animation-duration: 1s;
  position: fixed;
  left: 0;
  top: 30%;
  z-index: 999;
}

#social-container .platform {
  width: 48px;
  height: 48px;
  background: grey;
  padding: 8px;
  cursor: pointer;
  display: flex;
}

#social-container .platform:hover {
  width: 56px;
  transition: all 0.25s;
}

#social-container .platform:hover svg {
  transform: translate(10px);
  transition: all 0.25s;
}

#social-container .platform svg {
  fill: rgb(255, 255, 255);
}

#social-container .platform.facebook {
  background-color: rgb(59, 89, 152);
}

#social-container .platform.twitter {
  background: rgb(29, 161, 242);
}
</style>

Thanks, I will check it out.