CSS Portal
UI
Search
Create UI Element
Login
Register
Buttons
13
Cards
11
Checkboxes
10
Forms
10
Inputs
9
Loaders
11
Patterns
9
Radio Buttons
11
Toggle Switches
11
Tooltips
8
Favorites
Pacman Loader by daveTee
0
Add to Favorites
HTML Code
CSS Code
Copy
Copy
.loader-wrapper { position: relative; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .loader-wrapper .packman::before { content: ''; position: absolute; width: 50px; height: 25px; background-color: #EFF107; border-radius: 100px 100px 0 0; transform: translate(-50%, -50%); animation: pac-top 0.5s linear infinite; transform-origin: center bottom; } .loader-wrapper .packman::after { content: ''; position: absolute; width: 50px; height: 25px; background-color: #EFF107; border-radius: 0 0 100px 100px; transform: translate(-50%, 50%); animation: pac-bot 0.5s linear infinite; transform-origin: center top; } @keyframes pac-top { 0% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-50%, -50%) rotate(-30deg) } 100% { transform: translate(-50%, -50%) rotate(0) } } @keyframes pac-bot { 0% { transform: translate(-50%, 50%) rotate(0) } 50% { transform: translate(-50%, 50%) rotate(30deg) } 100% { transform: translate(-50%, 50%) rotate(0) } } .dots .dot { position: absolute; z-index: -1; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; } .dots .dot:nth-child(1) { left: 90px; animation: dot-stage1 0.5s infinite; } .dots .dot:nth-child(2) { left: 60px; animation: dot-stage1 0.5s infinite; } .dots .dot:nth-child(3) { left: 30px; animation: dot-stage1 0.5s infinite; } .dots .dot:nth-child(4) { left: 10px; animation: dot-stage2 0.5s infinite; } @keyframes dot-stage1 { 0% { transform: translate(0, 0); } 100% { transform: translate(-24px, 0); } } @keyframes dot-stage2 { 0% { transform: scale(1); } 5%, 100% { transform: scale(0); } }
Uploaded:
19th July 2024
Views:
36
Tags:
#pacman
,
#dots
,
#loader
,
#yellow
,
#animated
daveTee
CSS Properties Used
There are 16 CSS properties used in the above example. Click to view and learn about each property.
position
top
left
bottom
right
margin
content
width
height
background-color
border-radius
transform
animation
transform-origin
z-index
background