Simple Pure CSS Loader

Developer
Izzy Skye
Size
2,028 Kb
Views
18,216
  1. Simple Pure CSS Loader Previews
  2. Simple Pure CSS Loader HTML Codes
  3. Simple Pure CSS Loader CSS Codes

How do I make an simple pure css loader?

A phantasy star online 2 style pure css loader. What is a simple pure css loader? How do you make a simple pure css loader? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Simple Pure CSS Loader Previews
IQ Test

Simple Pure CSS Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Pure CSS Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="psoload"> <div class="straight"></div> <div class="curve"></div> <div class="center"></div> <div class="inner"></div>
</div>
</body>
</html>

Simple Pure CSS Loader - Script Codes CSS Codes

body { margin: 0; background: #333;
}
@keyframes arrow-spin { 100% { transform: rotate(179deg); }
}
@-webkit-keyframes arrow-spin { 100% { -webkit-transform: rotate(179deg); }
}
.psoload,
.psoload *,
.psoload *:before,
.psoload *:after { box-sizing: border-box; transition: all 0.3s; -webkit-transition: all 0.3s;
}
.psoload { position: relative; margin: 30px auto; height: 150px; width: 150px;
}
.psoload .straight,
.psoload .curve { position: absolute; top: 17.5%; left: 17.5%; width: 65%; height: 65%; border-radius: 100%; animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite; -webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite;
}
.psoload .straight:before,
.psoload .straight:after { content: ''; position: absolute; width: 15%; border-bottom: 3px solid #eee; transform: rotate(45deg); -webkit-transform: rotate(45deg);
}
.psoload .straight:before { top: 5px; left: 5px;
}
.psoload .straight:after { bottom: 5px; right: 5px;
}
.psoload .curve:before,
.psoload .curve:after { content: ''; position: absolute; width: 45px; height: 10px; border: solid 3px transparent; border-top-color: #eee; border-radius: 50%/10px 10px 0 0; z-index: 90001;
}
.psoload .curve:before { transform: rotate(-63deg) translateX(-27px) translateY(-4px); -webkit-transform: rotate(-63deg) translateX(-27px) translateY(-4px);
}
.psoload .curve:after { bottom: 5px; right: 5px; transform: rotate(115deg) translateX(-26px) translateY(-12px); -webkit-transform: rotate(115deg) translateX(-26px) translateY(-12px);
}
.psoload .center { position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; border-radius: 100%; border: 3px solid #eee;
}
.psoload .inner { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border-radius: 100%; animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse; -webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse;
}
.psoload .inner:before,
.psoload .inner:after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-bottom-width: 11px; border-bottom-color: #eee;
}
.psoload .inner:before { top: 12px; left: 12px; transform: rotate(128deg); -webkit-transform: rotate(128deg);
}
.psoload .inner:after { bottom: 12px; right: 12px; transform: rotate(-48deg); -webkit-transform: rotate(-48deg);
}
Simple Pure CSS Loader - Script Codes
Simple Pure CSS Loader - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 4.5
Size 2,028 Kb
Views 18,216
Do you need developer help for Simple Pure CSS 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!

Izzy Skye (zephyr) Script Codes
Name
Pure CSS Loader
Pure CSS Wordpress Fancyboxes
Unisolated Pure CSS Mobile Nav Spinner
Pure CSS Inanimate Cube Field
Pure CSS Menu Transition
Dynamic Spinning Cubes
Material CSS Contact Popup
Pure CSS Tab Navigation
Really simple burger menu
Animated Chart Cards
Create amazing marketing copy 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!