Pharmacy Loader

Developer
Mark Thomes
Size
3,425 Kb
Views
46,552
  1. Pharmacy Loader Previews
  2. Pharmacy Loader HTML Codes
  3. Pharmacy Loader CSS Codes

How do I make an pharmacy loader?

Loading pill animation for prescription list API delay.. What is a pharmacy loader? How do you make a pharmacy loader? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Pharmacy Loader Previews
IQ Test

Pharmacy Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html class="<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">">
<head> <meta charset="UTF-8"> <title>Pharmacy Loader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="absCenter "> <div class="loaderPill"> <div class="loaderPill-anim"> <div class="loaderPill-anim-bounce"> <div class="loaderPill-anim-flop"> <div class="loaderPill-pill"></div> </div> </div> </div> <div class="loaderPill-floor"> <div class="loaderPill-floor-shadow"></div> </div> <div class="loaderPill-text">Loading your RX</div> </div>
</div>
</body>
</html>

Pharmacy Loader - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Montserrat');
:root { /* Transitions */
}
body { font-family: 'Montserrat', sans-serif;
}
.absCenter { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.loaderPill { text-align: center;
}
.loaderPill-anim { height: 160px;
}
.loaderPill-anim-bounce { -webkit-animation: loaderPillBounce 1800ms linear infinite; animation: loaderPillBounce 1800ms linear infinite;
}
.loaderPill-anim-flop { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: loaderPillFlop 1800ms linear infinite; animation: loaderPillFlop 1800ms linear infinite;
}
.loaderPill-pill { display: inline-block; box-sizing: border-box; width: 80px; height: 30px; border-radius: 15px; border: 1px solid #237db5; background-image: -webkit-linear-gradient(left, #237db5 50%, #ffffff 50%); background-image: linear-gradient(to right, #237db5 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: rgba(35, 125, 181, 0.26); -webkit-transform: translateY(-15px); transform: translateY(-15px); -webkit-animation: loaderPillScale 1800ms linear infinite; animation: loaderPillScale 1800ms linear infinite;
}
.loaderPill-text { font-weight: bold; color: #237db5; text-transform: uppercase;
}
@-webkit-keyframes loaderPillBounce { 0% { -webkit-transform: translateY(123px); transform: translateY(123px); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 25% { -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 50% { -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 75% { -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 100% { -webkit-transform: translateY(120px); transform: translateY(120px); }
}
@keyframes loaderPillBounce { 0% { -webkit-transform: translateY(123px); transform: translateY(123px); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 25% { -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 50% { -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 75% { -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 100% { -webkit-transform: translateY(120px); transform: translateY(120px); }
}
@-webkit-keyframes loaderPillFlop { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(450deg); transform: rotate(450deg); } 100% { -webkit-transform: rotate(720deg); transform: rotate(720deg); }
}
@keyframes loaderPillFlop { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(450deg); transform: rotate(450deg); } 100% { -webkit-transform: rotate(720deg); transform: rotate(720deg); }
}
@-webkit-keyframes loaderPillScale { 0% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 25% { -webkit-transform: translateY(-15px) scale(0.7, 1); transform: translateY(-15px) scale(0.7, 1); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 50% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 75% { -webkit-transform: translateY(-15px) scale(0.6, 1); transform: translateY(-15px) scale(0.6, 1); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 100% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); }
}
@keyframes loaderPillScale { 0% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 25% { -webkit-transform: translateY(-15px) scale(0.7, 1); transform: translateY(-15px) scale(0.7, 1); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 50% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 75% { -webkit-transform: translateY(-15px) scale(0.6, 1); transform: translateY(-15px) scale(0.6, 1); -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 100% { -webkit-transform: translateY(-15px) scale(1, 1); transform: translateY(-15px) scale(1, 1); }
}
Pharmacy Loader - Script Codes
Pharmacy Loader - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 4.5
Size 3,425 Kb
Views 46,552
Do you need developer help for Pharmacy 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!

Mark Thomes (WithAnEs) Script Codes
Name
Social Icons
Basic Menu CSS
Save Bar
Swaying Open Sign
Running Character
CSS Books
CSS3 Gradient Stripes
Sidebar Nav
404 Animated Character
Up Arrow
Create amazing sales emails 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!