Triangle Loader

HTML
<div class="wrapper"> <div class="inner"></div> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> </div>
CSS
html, body { background: #222; overflow: hidden; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .wrapper { position: relative; left: 10%; animation: spin 1s linear infinite; transform-origin: 16% 34%; height: 174px; width: 300px; } .inner { width: 0; height: 0; border-bottom: 87px solid #e74c3c; border-left: 50px solid transparent; border-right: 50px solid transparent; box-sizing: border-box; transform-origin: 50% 65%; animation: inner 1s linear infinite; } .triangle { float: left; width: 0; height: 0; border-bottom: 87px solid #c0392b; border-left: 50px solid transparent; border-right: 50px solid transparent; transform-origin: 50% 0%; position: relative; box-sizing: border-box; } .triangle:nth-of-type(2) { top: -87px; left: -100px; animation: a 1s linear infinite; } .triangle:nth-of-type(3) { transform: rotate(-180deg); top: 87px; left: -100px; animation: b 1s linear infinite; } .triangle:nth-of-type(4) { transform: rotate(60deg); top: -87px; left: -100px; animation: c 1s linear infinite; } @keyframes a { from { transform: rotate(-60deg) scale(1); } to { transform: rotate(-60deg) scale(0); border-bottom-color: #e67e22; } } @keyframes b { from { transform: rotate(-180deg) scale(1); } to { transform: rotate(-180deg) scale(0); border-bottom-color: #e67e22; } } @keyframes c { from { transform: rotate(60deg) scale(1); } to { transform: rotate(60deg) scale(0); border-bottom-color: #e67e22; } } @keyframes inner { from { transform: rotate(0deg) scale(1); } to { transform: rotate(60deg) scale(2); } } @keyframes spin { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }
JAVASCRIPT
Expand for more options Login