Coffee loader

Developer
BJack
Size
2,706 Kb
Views
16,192
  1. Coffee loader Previews
  2. Coffee loader HTML Codes
  3. Coffee loader CSS Codes

How do I make an coffee loader?

What is a coffee loader? How do you make a coffee loader? This script and codes were developed by BJack on 07 October 2022, Friday.

Coffee loader Previews
IQ Test

Coffee loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>coffee loader</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .coffee { height: 50px; width: 40px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: linear-gradient(to bottom left, #f7941e, #c26c07); position: absolute; top: 50%; left: 50%; z-index: 999;
}
.coffee:before { position: absolute; content: ""; right: -15px; top: 5px; height: 25px; width: 10px; background: transparent; border: 5px solid #F7941E; border-left: 5px solid transparent; border-bottom: 5px solid #e78108; border-top-right-radius: 10px; border-bottom-right-radius: 10px; z-index: 1;
}
.coffee:after { position: absolute; content: ""; width: 5px; height: 30px; background: #e1e1e1; border-radius: 4px; top: -30px; box-shadow: 35px 0px 0 #e1e1e1, 17.5px -15px 0 #e1e1e1; animation: steam 3s ease infinite; opacity: 1;
}
@keyframes steam { 100% { top: -40px; background: #eeeeee; box-shadow: 35px 0px 0 #eeeeee, 17.5px -15px 0 #eeeeee; opacity: 0.25; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="coffee">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Coffee loader - Script Codes CSS Codes

.coffee { height: 50px; width: 40px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: linear-gradient(to bottom left, #f7941e, #c26c07); position: absolute; top: 50%; left: 50%; z-index: 999;
}
.coffee:before { position: absolute; content: ""; right: -15px; top: 5px; height: 25px; width: 10px; background: transparent; border: 5px solid #F7941E; border-left: 5px solid transparent; border-bottom: 5px solid #e78108; border-top-right-radius: 10px; border-bottom-right-radius: 10px; z-index: 1;
}
.coffee:after { position: absolute; content: ""; width: 5px; height: 30px; background: #e1e1e1; border-radius: 4px; top: -30px; box-shadow: 35px 0px 0 #e1e1e1, 17.5px -15px 0 #e1e1e1; animation: steam 3s ease infinite; opacity: 1;
}
@keyframes steam { 100% { top: -40px; background: #eeeeee; box-shadow: 35px 0px 0 #eeeeee, 17.5px -15px 0 #eeeeee; opacity: 0.25; }
}
Coffee loader - Script Codes
Coffee loader - Script Codes
Home Page Home
Developer BJack
Username BJack
Uploaded October 07, 2022
Rating 4
Size 2,706 Kb
Views 16,192
Do you need developer help for Coffee loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

BJack (BJack) Script Codes
Name
Chat app mockup
Penmau5
Animated Slide Hamburger Mobile Menu
Scroll indicator
Remembrance Day 2014.
Audio Slider
Flexbox menu
Another top menu
Social Buttons
StackOverflow solution
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!