Add latest changes of sources files

src/js/post.js

@@ -4,32 +4,23 @@ import stickybits from 'stickybits'
 import mediumZoom from 'medium-zoom'
 import fitvids from 'fitvids'
 
-$(document).ready(() => {
+let $progressCircle = null
-  fitvids('.js-post-content')
+let lastScrollingY = window.pageYOffset
+let lastWindowHeight = 0
+let lastDocumentHeight = 0
+let circumference = 0
+let isTicking = false
 
-  const $aosWrapper = $('.js-aos-wrapper')
+function isMobile(width = '768px') {
-  const $progressCircle = $('.js-progress')
-  const $scrollButton = $('.js-scrolltop')
-  const $loadComments = $('.js-load-comments')
-  const $commentsIframe = $('.js-comments-iframe')
-  const $recommendedArticles = $('.js-recommended-articles')
-
-  let lastScrollingY = window.pageYOffset
-  let lastWindowHeight = 0
-  let lastDocumentHeight = 0
-  let circumference = 0
-  let isTicking = false
-
-  function isMobile(width = '768px') {
   return window.matchMedia(`(max-width: ${width})`).matches
-  }
+}
 
-  function onScrolling() {
+function onScrolling() {
   lastScrollingY = window.pageYOffset
   requestTicking()
-  }
+}
 
-  function onResizing() {
+function onResizing() {
   setHeights()
   adjustShare(100)
 
@@ -37,33 +28,33 @@ $(document).ready(() => {
     setCircleStyles()
     requestTicking()
   }, 200)
-  }
+}
 
-  function requestTicking() {
+function requestTicking() {
   if (!isTicking) {
     requestAnimationFrame(updating)
   }
 
   isTicking = true
-  }
+}
 
-  function updating() {
+function updating() {
   const progressMax = lastDocumentHeight - lastWindowHeight
   const percent = Math.ceil((lastScrollingY / progressMax) * 100)
 
   if (percent <= 100) {
-      setProgress(percent * 1.5)
+    setProgress(percent)
   }
 
   isTicking = false
-  }
+}
 
-  function setHeights() {
+function setHeights() {
   lastWindowHeight = window.innerHeight
   lastDocumentHeight = $(document).height()
-  }
+}
 
-  function setCircleStyles() {
+function setCircleStyles() {
   const radiusCircle = $progressCircle.parent().width() / 2
   const borderWidth = isMobile() ? 2 : 3
 
@@ -76,14 +67,35 @@ $(document).ready(() => {
 
   $progressCircle[0].style.strokeDasharray = `${circumference} ${circumference}`
   $progressCircle[0].style.strokeDashoffset = circumference
-  }
+}
 
-  function setProgress(percent) {
+function setProgress(percent) {
   if (percent <= 100) {
     const offset = circumference - percent / 100 * circumference
     $progressCircle[0].style.strokeDashoffset = offset
   }
-  }
+}
+
+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')
@@ -113,10 +125,8 @@ $(document).ready(() => {
   adjustShare(1000)
 
   if ($recommendedArticles.length > 0) {
-    $recommendedArticles.on('init', function() {
+    $recommendedArticles.on('init', function () {
-      setHeights()
+      prepareProgressCircle()
-      setCircleStyles()
-      updating()
     })
 
     $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%;