Learn to design a pill loader with HTML and CSS through this detailed guide. Perfect for pharmacy applications.
Table of Contents
A pill loader, also known as a pharmacy loader or capsule loader, is a visual element commonly used in web applications to indicate the progress of tasks. In this tutorial, we'll walk through the process of creating a pill loader from scratch using HTML and CSS.
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File for the pill loader. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Let's break it down step by step:
1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
2. <html lang="en">: This opening tag marks the beginning of the HTML document and specifies that the language of the document is English.
3. <head>: This section contains meta-information about the document, such as its title, character encoding, and links to external resources like stylesheets.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, ensuring proper display of text characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag ensures compatibility with Internet Explorer by instructing it to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties for responsive web design, ensuring proper scaling on various devices.
- <title>Pill Loader</title>: This sets the title of the webpage, which appears in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external stylesheet named "styles.css" to the HTML document, providing styles to be applied to the webpage.
4. <body>: This section contains the visible content of the webpage.
5. <div class="absCenter">: This <div> element with the class "absCenter" serves to center its child elements both vertically and horizontally on the page.
6. <div class="loaderPill">: This <div> represents the container for the loader animation.
7. Inside the .loaderPill div, several nested <div> elements define the structure of the loader animation:
- .loaderPill-anim: Container for the animation.
- .loaderPill-anim-bounce: An element responsible for the bouncing animation.
- .loaderPill-anim-flop: An element responsible for the flopping animation.
- .loaderPill-pill: The actual pill-shaped loader element.
8. <div class="loaderPill-floor">: This <div> represents the floor or base of the loader animation.
9. <div class="loaderPill-floor-shadow"></div>: This <div> represents a shadow effect under the loader.
10. <div class="loaderPill-text">Loading your RX</div>: This <div> contains text indicating that the page is loading, for user feedback.
11. </body>: This tag marks the end of the body section.
12. </html>: This closing tag marks the end of the HTML document.
Step 2 (CSS Code):
Next, we need to style our pill loader by adding our CSS. This will give our pill loader an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Let's break down the CSS code:
1. @import: This rule imports the Montserrat font from Google Fonts to be used in the document.
2. :root: This is a CSS pseudo-class that represents the root element of the document, usually <html>. Custom properties (CSS variables) are declared here. These properties define cubic bezier functions for easing animations and a color variable for the UI color theme, as well as the duration for the loader animation.
3. body: This rule sets the font family of the entire document to Montserrat, falling back to a sans-serif font if Montserrat is not available.
4. .absCenter: This class positions an element absolutely in the center of its containing element by setting its top and left properties to 50% and then translating it back by -50% of its own width and height.
5. .loaderPill: This class sets up the container for the loader animation and aligns its contents to the center.
6. .loaderPill-anim: This class sets the height of the loader animation.
7. .loaderPill-anim-bounce: This class applies the animation for the bouncing motion of the loader pill using the loaderPillBounce keyframes animation.
8. .loaderPill-anim-flop: This class applies the animation for the flopping motion of the loader pill using the loaderPillFlop keyframes animation.
9. .loaderPill-pill: This class styles the loader pill element. It sets its dimensions, border radius, border color, and background gradient.
10. .loaderPill-floor: This class styles the floor of the loader animation.
11. .loaderPill-floor-shadow: This class styles the shadow beneath the loader pill.
12. .loaderPill-text: This class styles the text within the loader pill. It sets its font-weight, color, and text transform.
13. @keyframes: These are animation keyframes defined for the loader animation. They specify the transformations and timing functions at various points of the animation.
- loaderPillBounce: This keyframe animation defines the bouncing motion of the loader pill by changing its translateY property at different percentages of the animation duration.
- loaderPillFlop: This keyframe animation defines the flopping motion of the loader pill by rotating it at different angles.
- loaderPillScale: This keyframe animation defines the scaling motion of the loader pill by changing its scale along the y-axis at different percentages of the animation duration.
@import url('https://fonts.googleapis.com/css?family=Montserrat');
:root {
--EASE_INOUT_QUAD: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--EASE_IN_QUAD: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--EASE_OUT_QUAD: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--COLOR_UI_PHARMACY: #237db5;
--loaderPill_DURATION: 1800ms;
}
body {
font-family: 'Montserrat', sans-serif;
}
.absCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loaderPill {
text-align: center;
}
.loaderPill-anim {
height: 160px;
}
.loaderPill-anim-bounce {
-webkit-animation: loaderPillBounce var(--loaderPill_DURATION) linear infinite;
animation: loaderPillBounce var(--loaderPill_DURATION) linear infinite;
}
.loaderPill-anim-flop {
transform-origin: 50% 50%;
-webkit-animation: loaderPillFlop var(--loaderPill_DURATION) linear infinite;
animation: loaderPillFlop var(--loaderPill_DURATION) linear infinite;
}
.loaderPill-pill {
display: inline-block;
box-sizing: border-box;
width: 80px;
height: 30px;
border-radius: 15px;
border: 1px solid var(--COLOR_UI_PHARMACY);
background-image: linear-gradient(to right, var(--COLOR_UI_PHARMACY) 50%, #ffffff 50%);
}
.loaderPill-floor {
display: block;
text-align: center;
}
.loaderPill-floor-shadow {
display: inline-block;
width: 70px;
height: 7px;
border-radius: 50%;
background-color: color(var(--COLOR_UI_PHARMACY) alpha(26%));
transform: translateY(-15px);
-webkit-animation: loaderPillScale var(--loaderPill_DURATION) linear infinite;
animation: loaderPillScale var(--loaderPill_DURATION) linear infinite;
}
.loaderPill-text {
font-weight: bold;
color: var(--COLOR_UI_PHARMACY);
text-transform: uppercase;
}
@-webkit-keyframes loaderPillBounce {
0% {
transform: translateY(123px);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
25% {
transform: translateY(40px);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
50% {
transform: translateY(120px);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
75% {
transform: translateY(20px);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
100% {
transform: translateY(120px);
}
}
@keyframes loaderPillBounce {
0% {
transform: translateY(123px);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
25% {
transform: translateY(40px);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
50% {
transform: translateY(120px);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
75% {
transform: translateY(20px);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
100% {
transform: translateY(120px);
}
}
@-webkit-keyframes loaderPillFlop {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(450deg);
}
100% {
transform: rotate(720deg);
}
}
@keyframes loaderPillFlop {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(450deg);
}
100% {
transform: rotate(720deg);
}
}
@-webkit-keyframes loaderPillScale {
0% {
transform: translateY(-15px) scale(1, 1);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
25% {
transform: translateY(-15px) scale(0.7, 1);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
50% {
transform: translateY(-15px) scale(1, 1);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
75% {
transform: translateY(-15px) scale(0.6, 1);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
100% {
transform: translateY(-15px) scale(1, 1);
}
}
@keyframes loaderPillScale {
0% {
transform: translateY(-15px) scale(1, 1);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
25% {
transform: translateY(-15px) scale(0.7, 1);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
50% {
transform: translateY(-15px) scale(1, 1);
-webkit-animation-timing-function: var(--EASE_OUT_QUAD);
animation-timing-function: var(--EASE_OUT_QUAD);
}
75% {
transform: translateY(-15px) scale(0.6, 1);
-webkit-animation-timing-function: var(--EASE_IN_QUAD);
animation-timing-function: var(--EASE_IN_QUAD);
}
100% {
transform: translateY(-15px) scale(1, 1);
}
} Final Output:
Conclusion:
In conclusion, mastering the creation of a pill loader using HTML and CSS can significantly enhance the user experience of your web applications, particularly in pharmacy or capsule-related contexts. By following the steps outlined in this guide, you can build a visually appealing and functional loader that effectively communicates the progress of tasks to your users.
Remember to experiment with different styles, animations, and layouts to find the perfect design for your application. Additionally, thorough testing and troubleshooting ensure that your loader functions seamlessly across various browsers and devices, providing a consistent experience for all users.
With the skills acquired from this tutorial, you'll be equipped to create engaging loaders for your projects, adding a touch of professionalism and polish to your web development endeavors. Start implementing these techniques today and elevate the visual appeal and usability of your web applications.
Code by: Mark Thomes
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
