Spinner CSS

Developer
Ivan Sakoman
Size
2,411 Kb
Views
78,936
  1. Spinner CSS Previews
  2. Spinner CSS HTML Codes
  3. Spinner CSS CSS Codes

How do I make an spinner css?

What is a spinner css? How do you make a spinner css? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

Spinner CSS Previews
IQ Test

Spinner CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinner CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="200px" height="195px" viewBox="0 0 200 195"> <ellipse class="circle" cx="100" cy="97.5" rx="100" ry="97.5"/> <path class="bracket b1" d="M77.1,52.21,64.53,44.73A81.37,81.37,0,0,0,45.88,97.21q0,28.91,18.65,52.91l12.57-7.58a137.29,137.29,0,0,1-11.27-22.17,64.86,64.86,0,0,1-3.7-23.16,64.87,64.87,0,0,1,3.68-23.16A127.58,127.58,0,0,1,77.1,52.21Z"/> <path class="bracket b2" d="M115.79,52.21l-12.57-7.48A81.4,81.4,0,0,0,84.58,97.21q0,28.91,18.65,52.91l12.57-7.58a137.22,137.22,0,0,1-11.27-22.17,64.83,64.83,0,0,1-3.68-23.16,64.86,64.86,0,0,1,3.7-23.16A127.52,127.52,0,0,1,115.79,52.21Z"/> <path class="bracket b3" d="M139.58,97.21a64.92,64.92,0,0,1,3.68-23.16,127.54,127.54,0,0,1,11.27-21.87L142,44.7a81.42,81.42,0,0,0-18.68,52.51q0,28.91,18.65,52.91l12.57-7.58a137.23,137.23,0,0,1-11.27-22.17A64.9,64.9,0,0,1,139.58,97.21Z"/>
</svg>
</body>
</html>

Spinner CSS - Script Codes CSS Codes

body { background-color: #153C53;
}
svg { position: fixed; left: calc(50% - 100px); top: calc(50% - 97.5px);
}
.bracket { fill: #fff;
}
.bracket.b1, .bracket.b2, .bracket.b3 { transform-origin: 50% 50%; animation: spanSpinner 2s ease-out infinite;
}
.bracket.b2 { animation-delay: 0.2s;
}
.bracket.b3 { animation-delay: 0.4s;
}
.circle { fill: #a03033; transform-origin: 50% 50%; animation: circlePulse 2s ease-out infinite;
}
@keyframes spanSpinner { 0% { transform: scale(1); } 30% { transform: scale(0.5); } 100% { transform: scale(1); }
}
@keyframes circlePulse { 0% { transform: scale(1); } 30% { transform: scale(0.9); } 100% { transform: scale(1); }
}
Spinner CSS - Script Codes
Spinner CSS - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 2,411 Kb
Views 78,936
Do you need developer help for Spinner CSS?

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!

Ivan Sakoman (ssaakkaa) Script Codes
Name
Label expand
Apple logo bubbles
3D flipping card
Ribon label
Colorful Apple logo
OsijekFrontendSVG lesson2
Poison bottle CSS
ClipPath cursor
Pink Floyd pyramid
Bootstrap example
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!