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 Coffee Cup Loading Animation In CSS
HTML & CSSLoader

How To Make Coffee Cup Loading Animation In CSS

Admin
Last updated: 2022/12/02 at 4:18 AM
Admin
Share
6 Min Read
Coffee Cup Loading Animation In CSS

In this article, we are going to make Coffee Cup Loading Animation In CSS, or you can say CSS animations. So in here we will have a cup of a coffee, and also an image of coffee. We will just animate the coffee image, which looks like filling the cup. This is going to be so simple project, and you will learn animations in CSS with this project.

Contents
Pre-requisites To Make Coffee Cup Loading Animation In CSSCreating HTML Markup and Setting up The ValueCreating The CupAdding Coffee and AnimationsFull Source Code of Coffee Cup Loading Animation In CSSOutputYou may also like:

Pre-requisites To Make Coffee Cup Loading Animation In CSS

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

Creating HTML Markup and Setting up The Value

<!DOCTYPE html>
<html>
    <head>
        <title>Coffee Cup Filling</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cup">
            <div class="handle"></div>
        </div>
    </body>
</html>
body{
    background-color: #e6b54a;
    margin: 0px;
    padding: 0px;
}

In the HTML part, we have just added a div with class cup which will have another div with class handle, and lastly we have linked our CSS file.

Now we have done with HTML part, time to move on our main part which is our CSS. We have reset default HTML values with margin and padding to 0px, also we have colored our screen with #e6b54a, which is somewhat orange color.

Coffee Cup Loading Animation In CSS

Creating The Cup

.cup{
    height: 140px;
    width: 180px;
    border: 6px solid #e6b54a;
    position: absolute;
    top: 40%;
    left: 40%;
    border-radius: 0px 0px 70px 70px;
    box-shadow: 0px 0px 0px 6px white;
}
.handle{
    height: 70px;
    width: 40px;
    background-color: transparent;
    border: 6px solid white;
    position: relative;
    left: 186px;
    top: 2px;
    border-radius: 0px 25px 80px 0px;
}

Now let’s create our cup, first we have set some height and width then we have gave some border, also adjusted our cup from top and left. After that, we have added radius to the border of 70px, so it forms some round shape. Also, we have added some shadow to the cup.

After that let’s add the handle, we have added some height and width, also background we need here transparent for handle. Here we have added position to relative, so this handle won’t get collapsed to our cup, we require it outside the cup. Now we have adjusted with left and top property. And lastly, we have gave some round shape to our handle as well.

Coffee Cup Loading Animation In CSS

Adding Coffee and Animations

.cup{
    height: 140px;
    width: 180px;
    border: 6px solid #e6b54a;
    position: absolute;
    top: 40%;
    left: 40%;
    border-radius: 0px 0px 70px 70px;
    background: url(coffee.png);
    box-shadow: 0px 0px 0px 6px white;
    background-repeat: repeat-x;
    background-position: 0px 140px;
    animation: fill 5s infinite;
}

@keyframes fill{
    0%{
        background-position: 0px 140px;
    }
    20%
    {
        background-position: -450px 100px;
    }
    40%{
        background-position: -900px 50px;
    }
    80%{
        background-position: -1350px -40px;
    }
    100%{
        background-position: 0px 140px;;
    }
}

Now for animations, we need to add a coffee image here, also we have set it to repetition in X co-ordinates which means our image will get repeated column wise, or you can say horizontally. We have added our image into the cup using background position which specific.

Now we have our coffee in the cup, after this we want to give animation which should look like getting filled. For that, we have added animation fill for 5 second time duration, and it runs for infinite times. Now to define fill we use @keyframes in CSS, we will add conditions like when we reach to 0% of our time which 5 seconds then we need our image position at 0px 140px. Here, 0px will be horizontal position and 140px will be vertical position. Like wise, we have adjusted all the positions, so it looks smoother animation.

Coffee Cup Loading Animation In CSS

Full Source Code of Coffee Cup Loading Animation In CSS

index.html

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

style.css

body{
    background-color: #e6b54a;
    margin: 0px;
    padding: 0px;
}

.cup{
    height: 140px;
    width: 180px;
    border: 6px solid #e6b54a;
    position: absolute;
    top: 40%;
    left: 40%;
    border-radius: 0px 0px 70px 70px;
    background: url(coffee.png);
    box-shadow: 0px 0px 0px 6px white;
    background-repeat: repeat-x;
    background-position: 0px 140px;
    animation: fill 5s infinite;
}

.handle{
    height: 70px;
    width: 40px;
    background-color: transparent;
    border: 6px solid white;
    position: relative;
    left: 186px;
    top: 2px;
    border-radius: 0px 25px 80px 0px;
}

@keyframes fill{
    0%{
        background-position: 0px 140px;
    }
    20%
    {
        background-position: -450px 100px;
    }
    40%{
        background-position: -900px 50px;
    }
    80%{
        background-position: -1350px -40px;
    }
    100%{
        background-position: 0px 140px;;
    }
}

Output

Coffee Cup Loading Animation In CSS
View Demo
Download Code

You may also like:

  • HOW TO MAKE BICYCLE USING HTML AND 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, Coffee Cup Loading Animation, CSS
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 How To Make a Stopwatch In JavaScript How To Make a Stopwatch In JavaScript 2022
Next Article 3D Spinner in CSS How to Make 3D Spinner in 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?