By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
How to set the dropdown value by clicking on a table row
Javascript – How to set the dropdown value by clicking on a table row
JavaScript
Attempting to increase the counter, when the object's tag exist
Javascript – Attempting to increase the counter, when the object’s tag exist
JavaScript
Cycle2 JS center active slide
Javascript – Cycle2 JS center active slide
JavaScript
Can import all THREE.js post processing modules as ES6 modules except OutputPass
Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass
JavaScript
How to return closest match for an array in Google Sheets Appscript
Javascript – How to return closest match for an array in Google Sheets Appscript
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > Loader > How to Make Crawl Loader using CSS
HTML & CSSLoader

How to Make Crawl Loader using CSS

Admin
Last updated: 2022/12/02 at 4:28 AM
Admin
Share
6 Min Read
crawl loader using css

In this article, we will make crawl loader using CSS. In this very small project, we will add a crawler which will move in certain area, we will make this project with basic CSS only. This will be pretty good to make, and you will learn much more about the power of CSS. It will be a beginner-friendly project, so it will consist of basic CSS code.

Contents
Pre-requisites to Make Crawl Loader Using CSSCreating HTML Markup and Setting up ValuesCreating CrawlerAdding Animations to The CrawlerFull Source Code to Make Crawl Loader Using CSSOutput

Pre-requisites to Make Crawl Loader Using CSS

  • Basic knowledge of HTML.
  • Basic knowledge of CSS.
Demo

Creating HTML Markup and Setting up Values

<!DOCTYPE html>
<html>
    <head>
        <title>Coffee Cup Filling</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="loader"></div>
        </div>
    </body>
</html>
body{
    background-color: #00002a;
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    height: 300px;
    width: 300px;

    border: 2px solid white;
}

Firstly, in HTML, we have created a div container which contains another div loader. This is what we need in our HTML file, Now let’s move on to the CSS part. We have here first customized our body which have background-color as #00002a, Also we have reset our default padding and margin. Here we have gave some specific area using height and width, and lastly, we have set it to the center of the screen using justify-content and align-items. After that, we have assigned some height and width to our container and to show the area we have gave a white border to the container which we will remove later on.

Creating Crawler

.loader{
    height: 300px;
    width: 80px;
    background-image: linear-gradient(45deg,#00bbcc,#009cd4);
    border-radius: 80px;
    box-shadow: 0 0 22px 2px rgba(0, 187, 204, 0.25);
}

Now let’s create our crawler, for that we have set the same height as the container height, also we have gave some width as well. We will add colors using background-image with linear-gradient which have 2 colors #00bbcc and #009cd4, these colors will be collapsed at 45 degrees. Also, we will add some border-radius to give round shape to the edges. Again, we have added some box-shadow to crawler.

Adding Animations to The Crawler


.loader{
    height: 300px;
    width: 80px;
    background-image: linear-gradient(45deg,#00bbcc,#009cd4);
    border-radius: 80px;
    box-shadow: 0 0 22px 2px rgba(0, 187, 204, 0.25);
    animation: crawl 3s infinite;
}

@keyframes crawl{
    12.5%{
        height: 80px;
        width: 80px;
    }
    25%{
        height: 80px;
        width: 300px;
        transform: translateX(0);
    }
    37.5%{
        height: 80px;
        width: 80px;
        transform: translateX(220px);
    }
    50%{
        height: 300px;
        width: 80px;
        transform: translateX(220px);
    }
    62.5%{
        height: 80px;
        width: 80px;
        transform: translate(220px, 220px);
    }
    75%{
        height: 80px;
        width: 300px;
        transform: translateY(220px);
    }
    87.5%{
        height: 80px;
        width: 80px;
        transform: translateY(220px);
    }
    
}

Now, let’s add some animations to the crawler. For that, we have add animation with crawl name, for 3 second duration, and for infinite times. After that, we have used @keyframes to define the animations.

At 12.5% we have adjusted our height and width to 80px, at 25% we have stretched the width to 300 and also, we have translate to 0 on X-axis. At 37.5% we have again made height and width to 80px, and we have stretched in the X-axis by 220px. At 50% we have increased the height to 300px, and again we need to stretch X-axis by 220px again.

Now at 62.5%, we have reset the height and width to 80px, and also we have use transformation to 220px for both X-axis and Y-axis. At 75% we have stretched the width to 300px and also stretched at Y-axis by 220px, And last animation at 87.5% we have reset the height and width to 80px again and transformed Y-axis with 220px.

Full Source Code to Make Crawl Loader Using CSS

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Coffee Cup Filling</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="loader"></div>
        </div>
    </body>
</html>

style.css

body{
    background-color: #00002a;
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    height: 300px;
    width: 300px;
    border: 2px solid white;
}

.loader{
    height: 300px;
    width: 80px;
    background-image: linear-gradient(45deg,#00bbcc,#009cd4);
    border-radius: 80px;
    box-shadow: 0 0 22px 2px rgba(0, 187, 204, 0.25);
    animation: crawl 3s infinite;
}

@keyframes crawl{
    12.5%{
        height: 80px;
        width: 80px;
    }
    25%{
        height: 80px;
        width: 300px;
        transform: translateX(0);
    }
    37.5%{
        height: 80px;
        width: 80px;
        transform: translateX(220px);
    }
    50%{
        height: 300px;
        width: 80px;
        transform: translateX(220px);
    }
    62.5%{
        height: 80px;
        width: 80px;
        transform: translate(220px, 220px);
    }
    75%{
        height: 80px;
        width: 300px;
        transform: translateY(220px);
    }
    87.5%{
        height: 80px;
        width: 80px;
        transform: translateY(220px);
    }
    
} 

Output

crawl loader using css

Check out video reference here:

Demo
Download Code

You May Also Like:

  • How To Make Paint Loading Animation in CSS
  • How To Make Chemical Reaction With CSS Animation
  • How To Make Skeleton Loading Animation With CSS & JS

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Animation, Crawl Loader Using CSS, loader
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article 3D Spinner in CSS How to Make 3D Spinner in CSS
Next Article minimalist loader using css How to Make A Minimalist Loader Using CSS
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
Calendar in HTML

How to Make Dynamic Calendar in HTML & JavaScript

December 5, 2022
instagram signup form

How to Make Instagram Signup Page In HTML and CSS

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?