Loader by pierregirou
#212121
1.loader { 2 --color-success-300: #4bdf80; 3 --color-success-500: #1ed760; 4 --color-success-700: #18ac4d; 5 display: block; 6 justify-content: center; 7 align-items: center; 8 transform: rotate(5deg); 9} 10 11.loader .form1, 12.loader .form2 { 13 display: flex; 14 justify-content: center; 15 align-items: center; 16} 17 18.square { 19 width: 50px; 20 height: 50px; 21 margin: 2px; 22 background-color: rgba(150, 150, 150, 0.253); 23 border-radius: 5px; 24 animation: blinking 0.8s ease-in-out infinite; 25 opacity: 0; 26} 27 28@keyframes blinking { 29 0% { 30 opacity: 0.25; 31 background-color: rgba(4, 160, 30, 0.589); 32 } 33 34 50% { 35 opacity: 0.5; 36 background-color: var(--color-success-300); 37 } 38 39 75% { 40 opacity: 0.75; 41 background-color: var(--color-success-500); 42 } 43 44 100% { 45 opacity: 1; 46 background-color: var(--color-success-700); 47 } 48} 49 50.form1 .square:nth-child(1) { 51 animation-delay: 0.2s; 52} 53 54.form1 .square:nth-child(2) { 55 animation-delay: 0.4s; 56} 57 58.form2 .square:nth-child(2) { 59 animation-delay: 0.6s; 60} 61 62.form2 .square:nth-child(1) { 63 animation-delay: 0.8s; 64}
479 views
479 views
MIT License