Pentagon loading indicator

Developer
Oliver Kühn
Size
2,371 Kb
Views
14,168
  1. Pentagon loading indicator Previews
  2. Pentagon loading indicator HTML Codes
  3. Pentagon loading indicator CSS Codes
  4. Pentagon loading indicator JS Codes

How do I make an pentagon loading indicator?

Inspired by Bob James (http://codepen.io/mobibob) @see http://codepen.io/0x04/details/dGwBJ. What is a pentagon loading indicator? How do you make a pentagon loading indicator? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Pentagon loading indicator Previews
IQ Test

Pentagon loading indicator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pentagon loading indicator</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes fade-border { 0% { border-bottom-color: rgba(0,0,0,0.25); } 50% { border-bottom-color: rgba(0,0,0,1); } 100% { border-bottom-color: rgba(0,0,0,0.25); }
}
.container { top: 50%; left: 50%; margin: 0 -50pt; position: absolute;
}
.triangle { border: 100pt solid transparent; border-bottom-color: rgba(0,0,0,0.25); border-width: 0 50pt 68.819pt 50pt; width: 0; height: 0; position: absolute; transform-origin: 49.5pt 0; animation: fade-border 1s linear infinite;
}
.triangle.no-1 { transform: rotate(0.001deg); /* antialises border */ animation-delay: 0ms;
}
.triangle.no-2 { transform: rotate(72deg); animation-delay: 200ms;
}
.triangle.no-3 { transform: rotate(144deg); animation-delay: 400ms;
}
.triangle.no-4 { transform: rotate(216deg); animation-delay: 600ms;
}
.triangle.no-5 { transform: rotate(288deg); animation-delay: 800ms;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="triangle no-1"></div> <div class="triangle no-2"></div> <div class="triangle no-3"></div> <div class="triangle no-4"></div> <div class="triangle no-5"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pentagon loading indicator - Script Codes CSS Codes

@keyframes fade-border { 0% { border-bottom-color: rgba(0,0,0,0.25); } 50% { border-bottom-color: rgba(0,0,0,1); } 100% { border-bottom-color: rgba(0,0,0,0.25); }
}
.container { top: 50%; left: 50%; margin: 0 -50pt; position: absolute;
}
.triangle { border: 100pt solid transparent; border-bottom-color: rgba(0,0,0,0.25); border-width: 0 50pt 68.819pt 50pt; width: 0; height: 0; position: absolute; transform-origin: 49.5pt 0; animation: fade-border 1s linear infinite;
}
.triangle.no-1 { transform: rotate(0.001deg); /* antialises border */ animation-delay: 0ms;
}
.triangle.no-2 { transform: rotate(72deg); animation-delay: 200ms;
}
.triangle.no-3 { transform: rotate(144deg); animation-delay: 400ms;
}
.triangle.no-4 { transform: rotate(216deg); animation-delay: 600ms;
}
.triangle.no-5 { transform: rotate(288deg); animation-delay: 800ms;
}

Pentagon loading indicator - Script Codes JS Codes

/**
Pentagon loading indicator
--------------------------
Inspired by Bob James (https://codepen.io/mobibob)
@see https://codepen.io/0x04/details/dGwBJ
**/
Pentagon loading indicator - Script Codes
Pentagon loading indicator - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3
Size 2,371 Kb
Views 14,168
Do you need developer help for Pentagon loading indicator?

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!

Oliver Kühn (0x04) Script Codes
Name
Hover rotating cube
7 Segment Display Characters
Pure CSS Jalousien
Background-blend-mode Test
Max Headroom
FourPerfectlyRoundCircles
X4.css Theme System
Border loading indicators
Random Paint
Unicode glitching
Create amazing love letters 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!