updated loading spinner to show number of page reading

28b71061 · Afif Zafri · a0fa25b5 · 28b71061 · 28b71061 · 28b71061
Commit 28b71061 authored Oct 22, 2019 by Afif Zafri
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -13,6 +13,15 @@ body {
    display: none;
 }

+.progress-text {
+	font-size: 26px;
+	width: 200px;
+	position: absolute;
+	top: calc(60% - 65px);
+	left: calc(50% - 105px);
+	text-align: center;
+}
+
 fieldset {
    display: inline-block;
    background: #fff;

--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -24,7 +24,10 @@ $(document).ready(function(){
            });
            $(this).click();
        });
-        
+		
+		// Update progress text
+		$('.progress-text').html("Reading 0/0 pages");
+		
        // show loading
 		$('.se-pre-con').fadeIn('slow');
        
@@ -74,7 +77,7 @@ $(document).ready(function(){
    }
 	
 	// implement setTimout()
-	// This can minimize browser from overprocessing which can caused browser to be not responding
+	// This can minimize browser from overprocessing and end up freezing
 	// simple way to mimics multi threading
 	function processEntries(entries, i, max)
 	{
@@ -136,8 +139,13 @@ $(document).ready(function(){
            // output the images
            $('#output').append("<a href='"+url+"' id='comicImg'><img src='"+url+"' class='imgUrl'/></a>");
 			
+			// Update progress text
+			$('.progress-text').html("Reading "+i+"/"+max+" pages");
+			
 			// only hide loading spinnder when done process all
 			if(i == (max-1)) {
+				$('.progress-text').html("<font color='lime'>Completed!</font>");
+				
 				// hide loading
                $('.se-pre-con').fadeOut('slow');
                

--- a/index.html
+++ b/index.html
@@ -9,7 +9,9 @@
    </head>

    <body>
-        <div class="se-pre-con"></div> <!-- loading spinner -->
+        <div class="se-pre-con">
+			<div class="progress-text">Reading 0/0 pages</div>
+		</div> <!-- loading spinner -->

        <center>
            <fieldset>