welcome back to code grid folks brace yourself for an exciting Journey as we delve into the realm of web design and chat room in this tutorial you'll discover how to craft a captivating website loader animation with a block reveal effect using some simple green sock and vanilla JavaScript so without wasting much time let's dive right into it [Music] we'll kick off by adding a counter with plans to update it dynamically using JavaScript next we will add an overlay with 10 divs inside as bars later we will set their widths to 10bw using CSS ensuring that they cover the entire viewport web now that we've completed the loader part let's add some additional elements to prevent our page from appearing empty to enhance the overall appearance we'll include a navigation bar a header section and an image for the header instead of using a standard H1 heading we'll construct individual divs each containing a letter of the header text this technique will enable us to animate the letters later on using green socks stagger functionality foreign for the CSS let's begin with our usual routine by removing margins and paddings from all elements and setting the Box sizing property to border box for the body element we'll set the width and height to cover the entire viewport and apply overflow hidden to prevent unnecessary scrolling additionally We'll add a background color to enhance the visual Aesthetics of our page to style our navigation bar we'll set its position to fixed ensuring it remains at the top of the page additionally we'll set its width to 100 to span across the entire View Board to align the child divs within the navigation bar we'll utilize the power of flexbox thank you to refine the appearance of our anchor tags we'll remove the default text decoration we'll also set a desired color in font family to enhance the visual Style to structure our header we'll set its width to 100 to ensure it spans the entire width of the container we'll also re-employ flexbox to list the individual letter elements to add style to our individual letters within the header we'll customize the font family font size color and line height properties to enhance the hero image we'll set its width to match the width of the header with some additional padding and margin for visual spacing additionally we'll apply a border to the image container [Music] the image should cover the entire width of its parents so we will set width and height to 100 percent to optimize the overlay element we'll set its width and height to cover the full viewport ensuring it occupies the entire screen space additionally we'll utilize flexbox to display the blocks inline foreign time we'll configure each bar within the overlay to have a width of 10 viewport width and a height of 100 VH given that we have 10 bars in total this setup will ensure that they collectively cover the entire overlay element to position the counter we'll set its position fixed we'll also configure it to have a width and height of 100 to ensure it covers the entire viewport so that by utilizing flexbox we can easily position the counter at the bottom right corner using Flex set don't forget to unpaint the color padding and font styles to make it look aesthetic foreign let's implement the JavaScript code responsible for playing the counter inside the start loader function we'll Begin by selecting the counter element using query selector we'll also initialize a variable current value with an initial value of 0. next we Define the update counter function within this function we check if the current value has reached 100 if it has we exit the function otherwise we increment current value by a random number between 1 and 10 using four to ensure the counter does not exceed 100 We Set current value to 100 if it goes over that value we update the text content of the counter element to reflect the new current value to create a delay between each update of the counter we generate a random delay value between 50 and 250 milliseconds using floor we then use set timeout to call update counter again after the delay finally we call update counter once to kick start the animation to initiate the loader animation we invoke the start loader function to add the animations we will use GSAT to slowly Fade Out the counter after a delay of 3 seconds as a starting point once the counter Fades out we will update the height of the blocks remember to add the Stagger so that each block animates with a specific delay in between later we will animate the header letters with some stagger to be revealed after the blocks animated finally we animate the hero image in the same manner that's it [Music]