JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="progressbar-container">
    <div id="bar-progress"></div>
</div>
<div id="circle-container">
    <div id="slice">
        <div class="pie"></div>
        <div class="pie fill"></div>
    </div>
    <div id="text">0%</div>
    <div id="read-time"></div>
</div>
<div id="next-article">Read Next Article</div>
<div id="article">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et lobortis ante. Maecenas vestibulum massa urna, quis mollis tellus sodales suscipit. Donec vehicula fringilla sagittis. Aenean porta est risus, eu bibendum ante condimentum eu. Nam quis nunc vel augue commodo pulvinar. Suspendisse condimentum tristique nibh vel feugiat. Suspendisse ullamcorper ligula diam, ac tincidunt velit malesuada vel. Curabitur congue ultrices pharetra. Mauris iaculis diam in magna interdum tristique.</p>
    <p>Sed volutpat ligula nec fringilla pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sit amet rutrum dolor. Vivamus rutrum lacinia tellus in cursus. Etiam a auctor justo, id tristique nisl. Mauris vehicula volutpat interdum. Suspendisse venenatis sem et consequat imperdiet. In pulvinar molestie lorem. Morbi sit amet odio eu ante lacinia vulputate eu id purus.</p>
    <p>Ut malesuada magna dignissim purus posuere feugiat. Nam ultrices sapien quis est accumsan, quis elementum nulla accumsan. Aliquam porta volutpat ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae massa non magna accumsan convallis. Fusce ac orci urna. Quisque eu malesuada turpis, sit amet elementum diam. Ut tristique tincidunt mi sed laoreet. Duis diam est, pharetra ut elementum in, feugiat in orci.</p>
    <p>Maecenas mi ipsum, fringilla eu fringilla sit amet, faucibus ac justo. Nullam nec lorem eu lectus varius suscipit aliquet vitae risus. Proin quis lectus dictum, fringilla purus vitae, sagittis tortor. Morbi condimentum aliquet fringilla. Nam auctor libero in magna...

CSS

#article {
    width: 400px;
}
#progressbar-container {
    width: 200px;
    height: 20px;
    border: 1px solid black;
    position: fixed;
    top: 20px;
    right: 20px;
}
#bar-progress {
    width: 0%;
    height: 20px;
    background: black;
    -webkit-transition: all .05s ease-in-out;
    -moz-transition: all .05s ease-in-out;
    -o-transition: all .05s ease-in-out;
    -ms-transition: all .05s ease-in-out;
    transition: all .05s ease-in-out;
}
#circle-container {
    position: fixed;
    top: 60px;
    right: 20px;
    font-size: 200px;
    width: 1em;
    height: 1em;
}
#slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}
#slice.gt-50 {
    clip: rect(auto, auto, auto, auto);
}
.pie {
    border: 0.1em solid #000;
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.pie.fill {
    display: none;
}
.pie.fill.active {
    display: inline-block;
    -moz-transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}
#text {
    width: 200px;
    height: 200px;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    position: absolute;
}
#read-time {
    font-size: 20px;
    width: 100px;
    margin: 130px auto 0;
    text-align: center;
}
#next-article {
    width: 250px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    position: fixed;
    bottom: 20px;
    right: -320px;
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
   ...

JavaScript

$(function () {
    var text, words = 0;

    $('#article').each(function () {
        text = $.trim($(this).text());
        words += text.split(/\s+/).length;
    });

    var wpm = 200,
        time = Math.ceil(words / wpm);

    $('#read-time').text('~' + time + ' mins');
});

$(window).scroll(function () {
    var sT = $(window).scrollTop(),
        dH = $(document).height(),
        wH = $(window).height(),
        p = (sT / (dH - wH)) * 100,
        d = (p / 100) * 360;

    $('#text').text(Math.floor(p) + '%');

    if (p > 50) {
        $('#slice').addClass('gt-50');
        $('.pie.fill').addClass('active');
    } else {
        $('#slice').removeClass('gt-50');
        $('.pie.fill').removeClass('active');
    }

    $("#bar-progress").css('width', p + '%');

    $(".pie").css('transform', 'rotate(' + d + 'deg)');

    if (p >= 95) {
        $('#next-article').addClass('show');
    } else {
        $('#next-article').removeClass('show');
    }
});

// SmoothScroll for websites v1.2.1
// Licensed under the terms of the MIT license.

// People involved
//  - Balazs Galambosi (maintainer)  
//  - Michael Herf     (Pulse Algorithm)

! function () {
    function e() {
        var e = !1;
        e && c("keydown", o), g.keyboardSupport && !e && u("keydown", o)
    }

    function t() {
        if (document.body) {
            var t = document.body,
                r = document.documentElement,
                a = window.innerHeight,
                o = t.scrollHeight;
            if (x = document.compatMode.indexOf("CSS") >= 0 ? r : t, w = t, e(), S = !0, top != self) y = !0;
            else if (o > a && (t.offsetHeight <= a || r.offsetHeight <= a) && (r.style.height = "auto", x.offsetHeight <= a)) {
                var n = document.createElement("div");
                n.style.clear = "both", t.appendChild(n)
            }
            g.fixedBackground || b || (t.style.backgroundAttachment = "scroll", r.style.backgroundAttachment = "scroll")
        }
   ...