Loader by Alderx
#e8e8e8
1/* heart beat */ 2.heartbeatloader { 3 position: absolute; 4 width: 10vmin; 5 height: 10vmin; 6 z-index: -2; 7 margin: auto; 8 top: 0; 9 left: 0; 10 right: 0; 11 bottom: 0; 12} 13 14.svgdraw { 15 top: 30%; 16 left: 26%; 17 position: absolute; 18 width: 50%; 19 height: 50%; 20 transform: scale(1.4); 21 z-index: 3; 22} 23 24.path { 25 stroke: rgba(0, 0, 0, 0.95); 26 stroke-width: 4; 27 stroke-dasharray: 1000px; 28 stroke-dashoffset: 1000px; 29 animation: draw 1.5s infinite forwards normal linear; 30 animation-delay: 0.1s; 31 position: relative; 32} 33 34@keyframes draw { 35 to { 36 stroke-dashoffset: 0; 37 } 38} 39 40.innercircle { 41 position: absolute; 42 top: 17%; 43 left: 100.5%; 44 transform: translate(-50%, -50%) scale(1.2); 45 width: 160%; 46 height: auto; 47 z-index: 1; 48 opacity: 0.97; 49 animation: innerbeat 1.5s infinite linear forwards; 50} 51 52.innercircle:before, 53.innercircle:after { 54 position: absolute; 55 content: ""; 56 left: 25%; 57 top: 0; 58 width: 25%; 59 height: auto; 60 padding-bottom: 40%; 61 background: rgb(225, 95, 95); 62 border-radius: 50px 50px 0 0; 63 transform: rotate(-45deg); 64 transform-origin: 0 100%; 65} 66 67.innercircle:after { 68 left: 0; 69 transform: rotate(45deg); 70 transform-origin: 100% 100%; 71} 72 73@keyframes innerbeat { 74 0% { 75 transform: translate(-50%, -50%) scale(1.2); 76 } 77 78 10% { 79 transform: translate(-50%, -50%) scale(1.2); 80 } 81 82 50% { 83 transform: translate(-50%, -50%) scale(1.3); 84 } 85 86 60% { 87 transform: translate(-50%, -50%) scale(1.25); 88 } 89 90 75% { 91 transform: translate(-50%, -50%) scale(1.3); 92 } 93} 94 95.outercircle { 96 width: 100%; 97 height: 100%; 98 border-radius: 50%; 99 background-color: rgba(230, 92, 92, 0.774); 100 box-shadow: 0 0 30px 0px #000; 101 position: absolute; 102 z-index: -1; 103 opacity: 0.7; 104 top: 0; 105 left: 0; 106 transform: scale(1.2); 107 animation: outerbeat 1.5s infinite linear forwards; 108} 109 110@keyframes outerbeat { 111 0% { 112 transform: scale(1.2); 113 } 114 115 10% { 116 transform: scale(1.2); 117 } 118 119 50% { 120 transform: scale(1.3); 121 } 122 123 60% { 124 transform: scale(1.25); 125 } 126 127 75% { 128 transform: scale(1.3); 129 } 130}
581 views
Variation of aloader
MIT License