Add latest changes of sources files

src/js/post.js

@@ -4,16 +4,7 @@ import stickybits from 'stickybits'
 import mediumZoom from 'medium-zoom'
 import fitvids from 'fitvids'
 
-$(document).ready(() => {
-  fitvids('.js-post-content')
-
-  const $aosWrapper = $('.js-aos-wrapper')
-  const $progressCircle = $('.js-progress')
-  const $scrollButton = $('.js-scrolltop')
-  const $loadComments = $('.js-load-comments')
-  const $commentsIframe = $('.js-comments-iframe')
-  const $recommendedArticles = $('.js-recommended-articles')
-
+let $progressCircle = null
 let lastScrollingY = window.pageYOffset
 let lastWindowHeight = 0
 let lastDocumentHeight = 0
@@ -52,7 +43,7 @@ $(document).ready(() => {
   const percent = Math.ceil((lastScrollingY / progressMax) * 100)
 
   if (percent <= 100) {
-      setProgress(percent * 1.5)
+    setProgress(percent)
   }
 
   isTicking = false
@@ -85,6 +76,27 @@ $(document).ready(() => {
   }
 }
 
+function prepareProgressCircle() {
+  $progressCircle = $('.js-progress')
+
+  setHeights()
+  setCircleStyles()
+  updating()
+
+  setTimeout(() => {
+    $progressCircle.parent().css('opacity', 1)
+  }, 300)
+}
+
+$(document).ready(() => {
+  const $aosWrapper = $('.js-aos-wrapper')
+  const $scrollButton = $('.js-scrolltop')
+  const $loadComments = $('.js-load-comments')
+  const $commentsIframe = $('.js-comments-iframe')
+  const $recommendedArticles = $('.js-recommended-articles')
+
+  fitvids('.js-post-content')
+
   function adjustImageGallery() {
     const images = document.querySelectorAll('.kg-gallery-image img')
 
@@ -114,9 +126,7 @@ $(document).ready(() => {
 
   if ($recommendedArticles.length > 0) {
     $recommendedArticles.on('init', function () {
-      setHeights()
-      setCircleStyles()
-      updating()
+      prepareProgressCircle()
     })
 
     $recommendedArticles.slick({
@@ -141,10 +151,6 @@ $(document).ready(() => {
         }
       ]
     })
-  } else {
-    setHeights()
-    setCircleStyles()
-    updating()
   }
 
   $scrollButton.click(() => {
@@ -174,3 +180,7 @@ $(document).ready(() => {
   window.addEventListener('scroll', onScrolling, { passive: true })
   window.addEventListener('resize', onResizing, { passive: true })
 })
+
+$(window).on('load', () => {
+  prepareProgressCircle()
+})

src/sass/components/ui/_icon-button.scss

@@ -205,6 +205,7 @@
       top: 0;
       width: 100%;
       height: 100%;
+      opacity: 0;
 
       circle {
         transform-origin: 50% 50%;