1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- .loader-container {
- position: fixed;
- top: 50%;
- left: 50%;
- display: flex;
- flex-direction: row;
- transform: translate(-50%, -50%);
- }
- .loader-container div {
- height: 20px;
- width: 5px;
- background: #FE4A49;
- margin: 3px;
- border-radius: 25px;
- }
- .loader-container div:nth-child(1) {
- animation: loader 1s ease-in-out infinite 0s;
- }
- .loader-container div:nth-child(2) {
- animation: loader 1s ease-in-out infinite 0.1s;
- }
- .loader-container div:nth-child(3) {
- animation: loader 1s ease-in-out infinite 0.2s;
- }
- .loader-container div:nth-child(4) {
- animation: loader 1s ease-in-out infinite 0.3s;
- }
- .loader-container div:nth-child(5) {
- animation: loader 1s ease-in-out infinite 0.4s;
- }
- .loader-container div:nth-child(6) {
- animation: loader 1s ease-in-out infinite 0.5s;
- }
- .loader-container div:nth-child(7) {
- animation: loader 1s ease-in-out infinite 0.6s;
- }
- @keyframes loader {
- 0% {
- transform: scaleY(1);
- background: #FED766;
- }
- 25% {
- background: #009FB7;
- }
- 50% {
- transform: scaleY(2);
- background: #59CD90;
- }
- 75% {
- background: #FE4A49;
- }
- 100% {
- transform: scaleY(1);
- background: #D91E36;
- }
- }
|