css实现100多种loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现100多种loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } ::-webkit-scrollbar { width: 8px; height: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #263238; } /* Handle */ ::-webkit-scrollbar-thumb { background: #FF3D00; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #fff; } body { margin: 0; padding-top: 50px; display: flex; flex-wrap: wrap; background: #263238; font-family: Arial, Helvetica, sans-serif; } body.pop { overflow: hidden; } section { min-width: 200px; width: 33.33%; height: 200px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; color: #ccc; cursor: pointer; transition: 0.3s linear; } section:nth-child(2n+1) { background: rgba(0, 0, 0, 0.1); } section:hover { background: rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { section { width: 50%; } } @media (max-width: 480px) { section { width: 100%; } } header { background: #0d161b; padding: 10px 20px; min-height: 50px; position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; z-index: 2000; justify-content: space-between; } .brand { color: #fff; font-size: 32px; display: inline-block; position: relative; text-decoration: none; } .brand::after { content: ""; position: absolute; left: 20px; bottom: 5px; border: 3px solid #FFF; border-bottom-color: #FF3D00; width: 20px; height: 20px; border-radius: 50%; -webkit-animation: rotation 0.6s linear infinite; animation: rotation 0.6s linear infinite; } .nav-btn { color: #fff; text-decoration: none; } .loader-1 { width: 48px; height: 48px; border: 5px solid #FFF; border-bottom-color: #FF3D00; border-radius: 50%; display: inline-block; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-2 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-2:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #FF3D00; } .loader-3 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-3:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #FF3D00; } .loader-4 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-4:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid; border-color: #FF3D00 transparent; } .loader-5 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-5:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid; border-color: #FF3D00 transparent; } .loader-6 { width: 48px; height: 48px; border: 2px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-6:after, .loader-6:before { content: ""; position: absolute; left: 0; top: 0; background: #FF3D00; width: 6px; height: 6px; transform: translate(150%, 150%); border-radius: 50%; } .loader-6:before { left: auto; top: auto; right: 0; bottom: 0; transform: translate(-150%, -150%); } .loader-7 { width: 48px; height: 48px; border: 2px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-7:after, .loader-7:before { content: ""; position: absolute; left: 0; top: 0; background: #FF3D00; width: 6px; height: 6px; border-radius: 50%; } .loader-7:before { left: auto; top: auto; right: 0; bottom: 0; } .loader-8 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-8:after { content: ""; position: absolute; left: 0; top: 0; background: #FF3D00; width: 16px; height: 16px; transform: translate(-50%, 50%); border-radius: 50%; } .loader-9 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 2px solid #FF3D00; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-9:after { content: ""; position: absolute; left: 4px; top: 4px; border: 2px solid #FFF; width: 12px; height: 12px; border-radius: 50%; } .loader-10 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #FFF #FFF transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-10:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent #FF3D00 #FF3D00; width: 24px; height: 24px; border-radius: 50%; -webkit-animation: rotationBack 0.5s linear infinite; animation: rotationBack 0.5s linear infinite; transform-origin: center center; } .loader-11 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #FFF #FFF transparent transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-11:after, .loader-11:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent transparent #FF3D00 #FF3D00; width: 40px; height: 40px; border-radius: 50%; -webkit-animation: rotationBack 0.5s linear infinite; animation: rotationBack 0.5s linear infinite; transform-origin: center center; } .loader-11:before { width: 32px; height: 32px; border-color: #FFF #FFF transparent transparent; -webkit-animation: rotation 1.5s linear infinite; animation: rotation 1.5s linear infinite; } .loader-12 { width: 48px; height: 48px; border: 3px dotted #FFF; border-style: solid solid dotted dotted; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .loader-12:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px dotted #FF3D00; border-style: solid solid dotted; width: 24px; height: 24px; border-radius: 50%; -webkit-animation: rotationBack 1s linear infinite; animation: rotationBack 1s linear infinite; transform-origin: center center; } .loader-13 { width: 48px; height: 48px; border: 2px solid #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-13:after { content: ""; position: absolute; left: 50%; top: 0; background: #FF3D00; width: 3px; height: 24px; transform: translateX(-50%); } .loader-14 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-14::after, .loader-14::before { content: ""; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: animloader14 2s linear infinite; animation: animloader14 2s linear infinite; } .loader-14::after { -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-15 { width: 48px; height: 48px; border: 5px dotted #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .loader-16 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%); -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-16:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #263238; } .loader-17 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 3px solid #FFF; border-right: 3px solid transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-18 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 4px solid #FFF; border-right: 4px solid transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-18:after { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border-bottom: 4px solid #FF3D00; border-left: 4px solid transparent; } .loader-19 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; border-top: 4px solid #FFF; border-right: 4px solid transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-19:after { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border-left: 4px solid #FF3D00; border-bottom: 4px solid transparent; animation: rotation 0.5s linear infinite reverse; } .loader-20 { width: 48px; height: 48px; border: 5px solid; border-color: #FF3D00 transparent; border-radius: 50%; display: inline-block; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-21 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 10px solid; border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5); -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-22 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 10px solid; -webkit-animation: animloader51 1s linear infinite alternate; animation: animloader51 1s linear infinite alternate; } .loader-23 { width: 48px; height: 48px; border: 3px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-23:after { content: ""; position: absolute; left: 20px; top: 31px; border: 10px solid transparent; border-right-color: #FFF; transform: rotate(-40deg); } .loader-24 { width: 48px; height: 48px; border-width: 3px; border-style: dashed solid solid dotted; border-color: #FF3D00 #FF3D00 transparent #FF3D00; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-24:after { content: ""; position: absolute; left: 20px; top: 31px; border: 10px solid transparent; border-right-color: #FF3D00; transform: rotate(-40deg); } .loader-25 { width: 48px; height: 48px; background: #FFF; display: inline-block; border-radius: 50%; -webkit-animation: animloader14 1s ease-in infinite; animation: animloader14 1s ease-in infinite; } .loader-26 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-26::after, .loader-26::before { content: ""; width: 48px; height: 48px; border-radius: 50%; background: #FFF; position: absolute; left: 0; top: 0; -webkit-animation: animloader14 2s linear infinite; animation: animloader14 2s linear infinite; } .loader-26::after { -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-27 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-27::after, .loader-27::before { content: ""; width: 48px; height: 48px; border-radius: 50%; background: #FFF; position: absolute; left: 0; top: 0; -webkit-animation: animloader27 2s ease-in-out infinite; animation: animloader27 2s ease-in-out infinite; } .loader-27::after { -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-28 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; -webkit-animation: animloader28 1s linear infinite; animation: animloader28 1s linear infinite; } .loader-29 { border: 24px solid #FFF; border-bottom-color: #FF3D00; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-30 { border: 2px solid #FFF; width: 48px; height: 48px; background: #FF3D00; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .loader-30:after { content: ""; position: absolute; left: 50%; top: 50%; border: 24px solid; border-color: transparent #FFF; border-radius: 50%; transform: translate(-50%, -50%); } .loader-31 { width: 48px; height: 48px; background: #FFF; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-31:after { content: ""; position: absolute; left: 6px; top: 10px; width: 12px; height: 12px; color: #FF3D00; background: currentColor; border-radius: 50%; box-shadow: 25px 2px, 10px 22px; } .loader-32 { width: 48px; height: 48px; border: 4px solid; background: rgba(255, 255, 255, 0.2); border-color: transparent #FFF #FFF transparent; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s ease-in-out infinite; animation: rotation 1s ease-in-out infinite; } .loader-32:after { content: ""; position: absolute; left: 50%; top: 50%; border: 12px solid; border-color: transparent #FF3D00 #FF3D00 transparent; transform: translate(-50%, -50%); border-radius: 50%; } .loader-33 { border: 2px solid; border-color: transparent #FFF; width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .loader-33:after { content: ""; position: absolute; left: 50%; top: 50%; border: 24px solid; border-color: transparent rgba(255, 255, 255, 0.15); border-radius: 50%; transform: translate(-50%, -50%); } .loader-34 { border: 24px solid; border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5); border-radius: 50%; display: inline-block; -webkit-animation: animloader34 1s linear infinite; animation: animloader34 1s linear infinite; } .loader-35 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-35:after, .loader-35:before { content: ""; position: absolute; left: 0; top: 0; background: #FF3D00; width: 16px; height: 16px; transform: translate(-50%, 50%); border-radius: 50%; } .loader-35:before { left: auto; right: 0; background: #FFF; transform: translate(50%, 100%); } .loader-36 { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; -webkit-animation: zeroRotation 1s linear infinite alternate; animation: zeroRotation 1s linear infinite alternate; } .loader-36:after, .loader-36:before { content: ""; position: absolute; left: 0; top: 0; background: #FF3D00; width: 16px; height: 16px; transform: translate(-50%, 50%); border-radius: 50%; } .loader-36:before { left: auto; right: 0; transform: translate(50%, 100%); } .loader-37 { width: 48px; height: 48px; display: inline-block; position: relative; color: #FFF; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-37:after, .loader-37:before { content: ""; position: absolute; width: 24px; height: 24px; top: 0; background-color: #FFF; border-radius: 50%; -webkit-animation: scale50 1s infinite ease-in-out; animation: scale50 1s infinite ease-in-out; } .loader-37:before { top: auto; bottom: 0; background-color: #FF3D00; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .loader-38 { width: 48px; height: 48px; display: inline-block; position: relative; color: #FFF; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-38:after, .loader-38:before { content: ""; position: absolute; width: 24px; height: 24px; top: 50%; left: 50%; transform: scale(0.5) translate(0, 0); background-color: #FFF; border-radius: 50%; -webkit-animation: animloader38 1s infinite ease-in-out; animation: animloader38 1s infinite ease-in-out; } .loader-38:before { background-color: #FF3D00; transform: scale(0.5) translate(-48px, -48px); } .loader-39 { width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: relative; background: #FFF; -webkit-animation: shadowExpandX 2s linear infinite alternate; animation: shadowExpandX 2s linear infinite alternate; } .loader-40 { width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: relative; background: #FFF; box-shadow: -24px 0 #FFF, 24px 0 #FFF; -webkit-animation: shadowPulse 2s linear infinite; animation: shadowPulse 2s linear infinite; } .loader-41 { width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: relative; background: #FF3D00; color: #FFF; box-shadow: -24px 0, 24px 0; -webkit-animation: rotation 2s ease-in-out infinite; animation: rotation 2s ease-in-out infinite; } .loader-42 { width: 12px; height: 12px; border-radius: 50%; display: inline-block; position: relative; color: #FFF; -webkit-animation: animloader42 1s linear infinite alternate; animation: animloader42 1s linear infinite alternate; } .loader-43 { width: 10px; height: 10px; border-radius: 50%; display: inline-block; position: relative; color: #FFF; left: -100px; -webkit-animation: shadowRolling 2s linear infinite; animation: shadowRolling 2s linear infinite; } .loader-44 { width: 12px; height: 12px; border-radius: 50%; display: inline-block; position: relative; color: #FFF; -webkit-animation: animloader44 2s linear infinite; animation: animloader44 2s linear infinite; } .loader-45 { width: 12px; height: 12px; border-radius: 50%; display: inline-block; position: relative; color: #FFF; -webkit-animation: animloader45 1s linear infinite alternate; animation: animloader45 1s linear infinite alternate; } .loader-46 { width: 40px; height: 40px; border-radius: 50%; display: inline-block; position: relative; } .loader-46::after { content: ""; width: 16px; height: 16px; border-radius: 50%; position: absolute; left: 0; transform: translate(-50%, 100%); -webkit-animation: animloader46 1s linear infinite; animation: animloader46 1s linear infinite; top: 0; } .loader-47 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-47::after, .loader-47::before { content: ""; width: 48px; height: 48px; border: 2px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: rotation 2s ease-in-out infinite; animation: rotation 2s ease-in-out infinite; } .loader-47::after { border-color: #FF3D00; -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-48 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-48::after, .loader-48::before { content: ""; width: 48px; height: 48px; border: 4px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: animloader14 2s ease-in-out infinite; animation: animloader14 2s ease-in-out infinite; } .loader-48::after { border-color: #FF3D00; -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-49 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-49::after, .loader-49::before { content: ""; width: 48px; height: 48px; border: 2px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: rotation 2s ease-in-out infinite alternate; animation: rotation 2s ease-in-out infinite alternate; } .loader-49::after { border-color: #FF3D00; animation-direction: alternate-reverse; } .loader-50 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-50::after, .loader-50::before { content: ""; width: 48px; height: 48px; border: 2px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: scaleOut 2s ease-in-out infinite; animation: scaleOut 2s ease-in-out infinite; } .loader-50::after { border-color: #FF3D00; -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-51 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-51::after, .loader-51::before { content: ""; width: 48px; height: 48px; border: 2px solid #FFF; position: absolute; left: 0; top: 0; -webkit-animation: rotationBreak 3s ease-in-out infinite alternate; animation: rotationBreak 3s ease-in-out infinite alternate; } .loader-51::after { border-color: #FF3D00; animation-direction: alternate-reverse; } .loader-52 { width: 48px; height: 48px; display: inline-block; position: relative; border: 2px solid #FFF; -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .loader-52:after, .loader-52:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 2px solid #FF3D00; width: 38px; height: 38px; -webkit-animation: rotationBack 1.5s linear infinite; animation: rotationBack 1.5s linear infinite; transform-origin: center center; } .loader-52:before { width: 28px; height: 28px; border-color: #FFF; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-53 { width: 48px; height: 48px; display: inline-block; position: relative; background: #FFF; -webkit-animation: flipX 1s linear infinite; animation: flipX 1s linear infinite; } .loader-54 { width: 48px; height: 48px; display: inline-block; position: relative; color: #FFF; border: 1px solid; -webkit-animation: fill 2s linear infinite alternate; animation: fill 2s linear infinite alternate; } .loader-55 { width: 48px; height: 48px; display: inline-block; position: relative; background: #FFF; animation: zeroRotation 1s ease infinite alternate-reverse; } .loader-56 { width: 24px; height: 24px; display: inline-block; position: relative; background: #FFF; -webkit-animation: animloader56 2s linear infinite; animation: animloader56 2s linear infinite; } .loader-57 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-57::after { content: ""; width: 24px; height: 24px; position: absolute; left: 0; top: 0; background: #FFF; color: #FFF; -webkit-animation: animloader57 2s linear infinite alternate; animation: animloader57 2s linear infinite alternate; } .loader-58 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-58::before { content: ""; width: 24px; height: 24px; position: absolute; left: 0; top: -24px; -webkit-animation: animloader58 2s linear infinite alternate; animation: animloader58 2s linear infinite alternate; } .loader-58::after { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -webkit-animation: animloader58m 2s linear infinite alternate; animation: animloader58m 2s linear infinite alternate; } .loader-59 { width: 48px; height: 48px; display: inline-block; position: relative; transform: rotate(45deg); } .loader-59::before { content: ""; width: 24px; height: 24px; position: absolute; left: 0; top: -24px; -webkit-animation: animloader59 4s ease infinite; animation: animloader59 4s ease infinite; } .loader-59::after { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -webkit-animation: animloader56 2s ease infinite; animation: animloader56 2s ease infinite; } .loader-60 { width: 16px; height: 16px; box-shadow: 0 30px, 0 -30px; border-radius: 4px; background: currentColor; display: inline-block; position: relative; color: #FFF; left: -30px; -webkit-animation: animloader60 2s ease infinite; animation: animloader60 2s ease infinite; } .loader-60::after, .loader-60::before { content: ""; width: 16px; height: 16px; box-shadow: 0 30px, 0 -30px; border-radius: 4px; background: currentColor; color: #FFF; position: absolute; left: 30px; top: 0; -webkit-animation: animloader60 2s 0.2s ease infinite; animation: animloader60 2s 0.2s ease infinite; } .loader-60::before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; left: 60px; } [data-index="61"] { align-items: normal; padding-top: 75px; } .loader-61 { width: 8px; height: 40px; border-radius: 4px; display: inline-block; position: relative; background: currentColor; color: #FFF; -webkit-animation: animloader61m 0.3s 0.3s linear infinite alternate; animation: animloader61m 0.3s 0.3s linear infinite alternate; } .loader-61::after, .loader-61::before { content: ""; width: 8px; height: 40px; border-radius: 4px; background: currentColor; position: absolute; bottom: 0; left: 20px; -webkit-animation: animloader61 0.3s 0.45s linear infinite alternate; animation: animloader61 0.3s 0.45s linear infinite alternate; } .loader-61::before { left: -20px; -webkit-animation-delay: 0s; animation-delay: 0s; } .loader-62 { width: 8px; height: 40px; border-radius: 4px; display: inline-block; position: relative; background: currentColor; color: #FFF; -webkit-animation: animloader61 0.3s 0.3s linear infinite alternate; animation: animloader61 0.3s 0.3s linear infinite alternate; } .loader-62::after, .loader-62::before { content: ""; width: 8px; height: 40px; border-radius: 4px; background: currentColor; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; -webkit-animation: animloader61 0.3s 0.45s linear infinite alternate; animation: animloader61 0.3s 0.45s linear infinite alternate; } .loader-62::before { left: -20px; -webkit-animation-delay: 0s; animation-delay: 0s; } .loader-63 { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -40px; -webkit-animation: animloader63 1s linear infinite alternate; animation: animloader63 1s linear infinite alternate; } .loader-64 { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -60px; color: #FFF; -webkit-animation: animloader64 0.6s linear infinite; animation: animloader64 0.6s linear infinite; } .loader-65 { width: 48px; height: 6px; display: inline-block; position: relative; border-radius: 4px; top: -50px; color: #FFF; -webkit-animation: animloader65 0.6s linear infinite; animation: animloader65 0.6s linear infinite; } [data-index="66"] { justify-content: normal; padding-left: 15%; } .loader-66 { width: 4.8px; height: 4.8px; display: inline-block; position: relative; border-radius: 4px; color: #FFF; background: currentColor; -webkit-animation: animloader66 0.3s 0.3s linear infinite alternate; animation: animloader66 0.3s 0.3s linear infinite alternate; } .loader-66::after, .loader-66::before { content: ""; width: 4.8px; height: 4.8px; border-radius: 4px; background: currentColor; position: absolute; left: 0; top: 15px; -webkit-animation: animloader66 0.3s 0.45s linear infinite alternate; animation: animloader66 0.3s 0.45s linear infinite alternate; } .loader-66::after { top: -15px; -webkit-animation-delay: 0s; animation-delay: 0s; } .loader-67 { width: 4.8px; height: 4.8px; display: inline-block; position: relative; border-radius: 4px; color: #FFF; background: currentColor; -webkit-animation: animloader66 0.3s 0.3s linear infinite alternate; animation: animloader66 0.3s 0.3s linear infinite alternate; } .loader-67::after, .loader-67::before { content: ""; width: 4.8px; height: 4.8px; border-radius: 4px; background: currentColor; position: absolute; left: 50%; transform: translateX(-50%); top: 15px; -webkit-animation: animloader66 0.3s 0.45s linear infinite alternate; animation: animloader66 0.3s 0.45s linear infinite alternate; } .loader-67::after { top: -15px; -webkit-animation-delay: 0s; animation-delay: 0s; } .loader-68 { width: 8px; height: 48px; display: inline-block; position: relative; border-radius: 4px; left: -100px; -webkit-animation: animloader68 1s linear infinite alternate; animation: animloader68 1s linear infinite alternate; } .loader-69 { width: 20px; height: 12px; display: inline-block; position: relative; border-radius: 4px; color: #FFF; background: currentColor; -webkit-animation: animloader69 0.6s 0.3s ease infinite alternate; animation: animloader69 0.6s 0.3s ease infinite alternate; } .loader-69::after, .loader-69::before { content: ""; width: 20px; height: 12px; background: currentColor; position: absolute; border-radius: 4px; top: 0; right: 110%; -webkit-animation: animloader69 0.6s ease infinite alternate; animation: animloader69 0.6s ease infinite alternate; } .loader-69::after { left: 110%; right: auto; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .loader-70 { width: 100%; height: 4.8px; display: inline-block; position: relative; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .loader-70::after { content: ""; width: 96px; height: 4.8px; background: #FFF; position: absolute; top: 0; left: 0; -webkit-animation: hitZak 1s linear infinite alternate; animation: hitZak 1s linear infinite alternate; } .loader-71 { width: 100%; height: 4.8px; display: inline-block; position: relative; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .loader-71::after { content: ""; width: 192px; height: 4.8px; background: #FFF; position: absolute; top: 0; left: 0; -webkit-animation: animloader71 2s linear infinite; animation: animloader71 2s linear infinite; } .loader-72 { width: 100%; height: 4.8px; display: inline-block; position: relative; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .loader-72::after { content: ""; width: 0; height: 4.8px; background: #FFF; position: absolute; top: 0; left: 0; -webkit-animation: animFw 10s linear infinite; animation: animFw 10s linear infinite; } [data-index="73"] { justify-content: normal; } .loader-73 { width: 0; height: 4.8px; display: inline-block; position: relative; background: #FFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); -webkit-animation: animFw 8s linear infinite; animation: animFw 8s linear infinite; } .loader-73::after, .loader-73::before { content: ""; width: 10px; height: 1px; background: #FFF; position: absolute; top: 9px; right: -2px; opacity: 0; transform: rotate(-45deg) translateX(0px); -webkit-animation: coli1 0.3s linear infinite; animation: coli1 0.3s linear infinite; } .loader-73::before { top: -4px; transform: rotate(45deg); -webkit-animation: coli2 0.3s linear infinite; animation: coli2 0.3s linear infinite; } .loader-74 { width: 100%; height: 4.8px; display: inline-block; position: relative; overflow: hidden; } .loader-74::after { content: ""; width: 96px; height: 4.8px; background: #FFF; position: absolute; top: 0; left: 0; -webkit-animation: hitZak 0.6s ease-in-out infinite alternate; animation: hitZak 0.6s ease-in-out infinite alternate; } .loader-75 { width: 100%; height: 4.8px; display: inline-block; background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .loader-75::after { content: ""; width: 0%; height: 4.8px; background-color: #FFF; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); background-size: 15px 15px; position: absolute; top: 0; left: 0; -webkit-animation: animFw 6s ease-in infinite; animation: animFw 6s ease-in infinite; } .loader-76 { width: 100%; height: 4.8px; display: inline-block; background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .loader-76::after { content: ""; width: 0%; height: 4.8px; background-color: #FFF; font-size: 15px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); background-size: 1em 1em; position: absolute; top: 0; left: 0; -webkit-animation: animFw 10s ease-in infinite, barStripe 1s linear infinite; animation: animFw 10s ease-in infinite, barStripe 1s linear infinite; } .loader-77 { width: 100%; height: 8px; display: inline-block; position: relative; overflow: hidden; } .loader-77::before { content: ""; top: 0; left: 0; height: 100%; width: 100%; position: absolute; background-color: rgba(255, 255, 255, 0.15); background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); background-size: 15px 15px; z-index: 10; } .loader-77::after { content: ""; width: 0%; height: 100%; background-color: #FFF; position: absolute; border-radius: 0 4px 4px 0; top: 0; left: 0; -webkit-animation: animFw 10s ease-in infinite; animation: animFw 10s ease-in infinite; } .loader-78 { width: 100%; height: 12px; display: inline-block; background-color: #FFF; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); font-size: 30px; background-size: 1em 1em; -webkit-animation: barStripe 1s linear infinite; animation: barStripe 1s linear infinite; } .loader-79 { width: 96px; height: 16px; display: inline-block; background-color: #FFF; border: 1px solid #FFF; border-radius: 4px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); font-size: 30px; background-size: 1em 1em; -webkit-animation: barStripe 1s linear infinite; animation: barStripe 1s linear infinite; } .loader-80 { width: 96px; height: 24px; display: inline-block; background-color: #FFF; border: 1px solid #FFF; border-radius: 4px; background: linear-gradient(45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent); font-size: 15px; background-size: 1em 1em; -webkit-animation: barStripe 0.6s linear infinite; animation: barStripe 0.6s linear infinite; } .loader-81 { width: 130px; height: 48px; display: inline-block; background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%); font-size: 10px; background-size: 32px 32px; -webkit-animation: raceBoard 0.6s linear infinite; animation: raceBoard 0.6s linear infinite; background-position: 0 0, 16px 16px; } .loader-82 { width: 48px; height: 48px; display: inline-block; position: relative; background-color: #FFF; background: radial-gradient(ellipse at center, #FF3D00 0%, #FF3D00 14%, #FFF 15%, #FFF 100%); background-size: cover; background-position: center; border-radius: 50%; } .loader-82::after, .loader-82::before { content: ""; position: absolute; height: 16px; width: 4px; background: #FF3D00; top: 50%; left: 50%; transform: translateX(-50%) rotate(0deg); transform-origin: 25% 0; -webkit-animation: rotation 10s linear infinite; animation: rotation 10s linear infinite; } .loader-82::before { height: 22px; width: 2px; transform: translateX(-50%) rotate(0deg); -webkit-animation-duration: 1s; animation-duration: 1s; } .loader-83 { width: 175px; height: 80px; position: relative; } .loader-83::before { content: ""; left: 60px; bottom: 18px; position: absolute; width: 36px; height: 36px; border-radius: 50%; background-color: #FFF; background-image: radial-gradient(circle 8px at 18px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #263238 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #263238 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #263238 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #263238 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #263238 100%, transparent 0); background-repeat: no-repeat; -webkit-animation: rotationBack 3s linear infinite; animation: rotationBack 3s linear infinite; } .loader-83::after { content: ""; left: 94px; bottom: 15px; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: #FFF; background-image: radial-gradient(circle 5px at 12px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #263238 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #263238 100%, transparent 0); background-repeat: no-repeat; animation: rotationBack 4s linear infinite reverse; } .loader-84 { width: 15px; height: 20px; background: #FFF; display: inline-block; position: relative; -webkit-animation: bump 0.4s ease-in infinite alternate; animation: bump 0.4s ease-in infinite alternate; } .loader-84::after { content: ""; left: 50%; top: 100%; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-top-color: #FFF; } .loader-85 { width: 15px; height: 20px; background: #FFF; display: inline-block; position: relative; -webkit-animation: bump 0.4s linear infinite alternate; animation: bump 0.4s linear infinite alternate; } .loader-85::after { content: ""; left: 50%; bottom: 100%; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-bottom-color: #FFF; } .loader-86 { width: 48px; height: 12px; background: #FFF; display: inline-block; position: relative; } .loader-86::after { content: ""; left: 50%; bottom: 0; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-top-color: #FFF; -webkit-animation: bump 0.4s ease-in-out infinite alternate; animation: bump 0.4s ease-in-out infinite alternate; } .loader-86::before { content: ""; left: 50%; bottom: 25px; transform: translate(-50%, 0); position: absolute; width: 15px; height: 20px; background: #FFF; -webkit-animation: bump 0.4s ease-in-out infinite alternate; animation: bump 0.4s ease-in-out infinite alternate; } .loader-87 { width: 48px; height: 12px; background: #FFF; display: inline-block; position: relative; } .loader-87::after { content: ""; left: 50%; top: -47px; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-bottom-color: #FFF; -webkit-animation: bump 0.4s ease-in-out infinite alternate; animation: bump 0.4s ease-in-out infinite alternate; } .loader-87::before { content: ""; left: 50%; bottom: 15px; transform: translate(-50%, 0); position: absolute; width: 15px; height: 20px; background: #FFF; -webkit-animation: bump 0.4s ease-in-out infinite alternate; animation: bump 0.4s ease-in-out infinite alternate; } .loader-88 { width: 48px; height: 24px; display: inline-block; position: relative; color: #FFF; border: 1px solid; -webkit-animation: fillX 2s linear infinite; animation: fillX 2s linear infinite; } .loader-88::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background: #FFF; width: 5px; height: 12px; } .loader-89 { width: 48px; height: 24px; display: inline-block; position: relative; border: 1px solid #FFF; } .loader-89::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 1px solid #FFF; width: 5px; height: 12px; } .loader-89::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); height: 80%; width: 6px; -webkit-animation: animloader89 2s linear infinite; animation: animloader89 2s linear infinite; } .loader-90 { width: 48px; height: 48px; display: inline-block; position: relative; border: 4px solid #FFF; -webkit-animation: fill 2s linear infinite alternate; animation: fill 2s linear infinite alternate; color: rgba(255, 61, 0, 0.9); border-radius: 0 0 4px 4px; } .loader-90::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 4px solid #FFF; width: 20px; height: 25px; border-radius: 0 4px 4px 0; } .loader-91 { width: 32px; height: 72px; display: inline-block; position: relative; border: 2px solid #FFF; -webkit-animation: animloader91 2s linear infinite alternate; animation: animloader91 2s linear infinite alternate; color: #FF3D00; border-radius: 0 0 4px 4px; transform: perspective(140px) rotateX(-45deg); } .loader-92 { width: 48px; height: 40px; display: inline-block; position: relative; background: #FFF; border-radius: 15% 15% 35% 35%; } .loader-92::after { content: ""; position: absolute; left: 45px; top: 8px; border: 4px solid #FFF; width: 16px; height: 20px; border-radius: 0 4px 4px 0; } .loader-92::before { content: ""; position: absolute; width: 1px; height: 10px; color: #FFF; top: -15px; left: 11px; -webkit-animation: animloader92 1s ease infinite; animation: animloader92 1s ease infinite; } .loader-93 { width: 96px; height: 48px; display: inline-block; position: relative; background: #FFF; border-radius: 48px 48px 0 0; overflow: hidden; } .loader-93::after { content: ""; position: absolute; width: 24px; height: 12px; border-radius: 24px 24px 0 0; background: #FF3D00; left: 50%; transform: translateX(-50%); bottom: 0; } .loader-93::before { content: ""; position: absolute; width: 4px; height: 32px; left: 0; right: 0; margin: auto; bottom: 0; background: #FF3D00; transform-origin: 50% 100%; -webkit-animation: animloader93 2s linear infinite alternate; animation: animloader93 2s linear infinite alternate; } .loader-94 { width: 48px; height: 48px; display: inline-block; position: relative; border: 3px solid #FFF; border-radius: 50%; -webkit-animation: animloader94 2s linear infinite; animation: animloader94 2s linear infinite; } .loader-94::after { content: ""; width: 6px; height: 24px; background: #FFF; transform: rotate(-45deg); position: absolute; bottom: -20px; left: 46px; } .loader-95 { width: 48px; height: 48px; display: inline-block; position: relative; } .loader-95::after { content: ""; width: 48px; height: 48px; left: 0; bottom: 0; position: absolute; border-radius: 50% 50% 0; border: 15px solid #FFF; transform: rotate(45deg) translate(0, 0); -webkit-animation: animMarker 0.4s ease-in-out infinite alternate; animation: animMarker 0.4s ease-in-out infinite alternate; } .loader-95::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: 150%; width: 24px; height: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); -webkit-animation: animShadow 0.4s ease-in-out infinite alternate; animation: animShadow 0.4s ease-in-out infinite alternate; } .loader-96 { width: 48px; height: 48px; background: #FF3D00; display: inline-block; position: relative; animation: rotationBack 1s ease-in-out infinite reverse; } .loader-96::before { content: ""; left: 0; top: 0; transform: rotate(45deg); position: absolute; width: 48px; height: 48px; background: #FF3D00; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .loader-96::after { content: ""; width: 32px; height: 32px; border-radius: 50%; position: absolute; left: 50%; top: 50%; background: #FFF; transform: translate(-50%, -50%); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .loader-97 { width: 60px; height: 60px; display: inline-block; position: relative; background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%); background-size: 20px 20px, 20px auto; background-repeat: repeat-x; background-position: center bottom, center -5px; } .loader-97::before, .loader-97::after { content: ""; position: absolute; left: -20px; top: 0; width: 20px; height: 60px; background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%); background-size: 20px 20px, 20px auto; background-repeat: no-repeat; background-position: center bottom, center -5px; transform: rotate(0deg); transform-origin: 50% 0%; -webkit-animation: animPend 1s linear infinite alternate; animation: animPend 1s linear infinite alternate; } .loader-97::after { -webkit-animation: animPend2 1s linear infinite alternate; animation: animPend2 1s linear infinite alternate; left: 100%; } .loader-98 { width: 24px; height: 80px; border: 1px solid #FFF; border-radius: 0 0 50px 50px; position: relative; box-shadow: 0px 0px #FF3D00 inset; background-image: linear-gradient(#FF3D00 100px, transparent 0); background-position: 0px 0px; background-size: 22px 80px; background-repeat: no-repeat; -webkit-animation: animloader98 6s linear infinite; animation: animloader98 6s linear infinite; } .loader-98::after { content: ""; top: -6px; left: 50%; transform: translateX(-50%); position: absolute; border: 1px solid #FFF; border-radius: 50%; width: 28px; height: 6px; } .loader-98::before { content: ""; left: 0; bottom: -4px; border-radius: 50%; position: absolute; width: 6px; height: 6px; -webkit-animation: animloader98s 6s linear infinite; animation: animloader98s 6s linear infinite; } .loader-99 { width: 20px; height: 20px; margin-top: 80px; border-radius: 50%; background: #FF3D00; border: 5px solid #FFF; position: relative; } .loader-99::before { content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 8px; height: 80px; border: 2px solid #FFF; border-bottom: none; background: #FFF; color: #FF3D00; border-radius: 50px 50px 0 0; box-shadow: 0px 0px inset; -webkit-animation: animloader99 6s linear infinite; animation: animloader99 6s linear infinite; } .loader-100 { width: 180px; height: 140px; background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px; background-repeat: no-repeat; background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px; position: relative; } .loader-100::after { content: ""; position: absolute; left: 2px; top: 65px; width: 2px; height: 6px; color: #FFF; -webkit-animation: animloader100 0.6s linear infinite; animation: animloader100 0.6s linear infinite; } .loader-101 { width: 175px; height: 80px; background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; background-repeat: no-repeat; position: relative; } .loader-101::after { content: ""; left: 50%; bottom: 0; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-top-color: #FF3D00; -webkit-animation: fadePush 1s linear infinite; animation: fadePush 1s linear infinite; } .loader-101::before { content: ""; left: 50%; bottom: 30px; transform: translate(-50%, 0); position: absolute; width: 15px; height: 15px; background: #FF3D00; -webkit-animation: fadePush 1s linear infinite; animation: fadePush 1s linear infinite; } .loader-102 { width: 175px; height: 80px; background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; background-repeat: no-repeat; position: relative; } .loader-102::after { content: ""; left: 50%; bottom: 30px; transform: translate(-50%, 0); position: absolute; border: 15px solid transparent; border-bottom-color: #FF3D00; -webkit-animation: fadePull 1s linear infinite; animation: fadePull 1s linear infinite; } .loader-102::before { content: ""; left: 50%; bottom: 15px; transform: translate(-50%, 0); position: absolute; width: 15px; height: 15px; background: #FF3D00; -webkit-animation: fadePull 1s linear infinite; animation: fadePull 1s linear infinite; } .loader-103 { width: 175px; height: 80px; background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; background-repeat: no-repeat; position: relative; } .loader-103::after { content: ""; left: 0; right: 0; margin: auto; bottom: 20px; position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 5px solid transparent; border-color: #FF3D00 transparent; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } .loader-104 { width: 175px; height: 80px; background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; background-repeat: no-repeat; position: relative; } .loader-104::before { content: ""; left: 60px; bottom: 18px; position: absolute; width: 36px; height: 36px; border-radius: 50%; background-color: #FF3D00; background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0); background-repeat: no-repeat; -webkit-animation: rotationBack 3s linear infinite; animation: rotationBack 3s linear infinite; } .loader-104::after { content: ""; left: 94px; bottom: 15px; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: #FF3D00; background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0); background-repeat: no-repeat; animation: rotationBack 4s linear infinite reverse; } .loader-105 { width: 175px; height: 80px; background-image: linear-gradient(#263238 50px, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); background-size: 64px 6px, 50px 50px, 100px 76px, 50px 50px, 120px 40px; background-position: 55px 60px, 0px 30px, 37px 0px, 122px 30px, 25px 40px; background-repeat: no-repeat; position: relative; } .loader-105::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%) rotate(-180deg); top: 62px; height: 64px; width: 60px; background-color: #FFF; background-image: linear-gradient(#DDD 20px, transparent 0), linear-gradient(#DDD 5px, transparent 0), linear-gradient(#DDD 10px, transparent 0), linear-gradient(#DDD 10px, transparent 0); background-size: 50px 20px; background-position: 5px 36px, 5px 25px, 5px 10px; background-repeat: no-repeat; border-radius: 2px 2px 4px 4px; z-index: 10; box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.5); -webkit-animation: animloader105 4s linear infinite; animation: animloader105 4s linear infinite; } .loader-106 { width: 32px; height: 90px; margin-bottom: 20px; position: relative; border-radius: 50% 50% 0 0; border-bottom: 10px solid #FF3D00; background-color: #FFF; background-image: radial-gradient(ellipse at center, #FFF 34%, #FF3D00 35%, #FF3D00 54%, #FFF 55%), linear-gradient(#FF3D00 10px, transparent 0); background-size: 28px 28px; background-position: center 20px, center 2px; background-repeat: no-repeat; -webkit-animation: animloader106back 1s linear infinite alternate; animation: animloader106back 1s linear infinite alternate; } .loader-106::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 64px; height: 44px; border-radius: 50%; box-shadow: 0px 15px #FF3D00 inset; top: 67px; } .loader-106::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); width: 34px; height: 34px; top: 112%; background: radial-gradient(ellipse at center, #ffdf00 8%, rgba(249, 62, 0, 0.6) 24%, rgba(0, 0, 0, 0) 100%); border-radius: 50% 50% 0; background-repeat: no-repeat; background-position: -44px -44px; background-size: 100px 100px; box-shadow: 4px 4px 12px 0px rgba(255, 61, 0, 0.5); -webkit-animation: animloader106 1s linear infinite alternate; animation: animloader106 1s linear infinite alternate; } .loader-107 { width: 106px; height: 56px; background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0); background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px; background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px; background-repeat: no-repeat; position: relative; transform: rotate(-45deg); } .loader-107::after, .loader-107::before { content: ""; position: absolute; width: 56px; height: 56px; border: 6px solid #FFF; border-radius: 50%; left: -45px; top: -10px; background-repeat: no-repeat; background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0); background-size: 40px 1px, 1px 40px, 8px 8px; background-position: center center; -webkit-animation: rotation 0.3s linear infinite; animation: rotation 0.3s linear infinite; } .loader-107::before { left: 25px; top: 60px; } .loader-108 { width: 48px; height: 24px; color: #FFF; background: currentColor; border-radius: 50% 50% 0 0; position: relative; margin-top: 36px; -webkit-animation: animloader108 4s linear infinite; animation: animloader108 4s linear infinite; } .loader-108::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: currentColor; top: -34px; -webkit-animation: animloader108s 4s linear infinite; animation: animloader108s 4s linear infinite; } .loader-109 { font-size: 48px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FF3D00; letter-spacing: 2px; position: relative; } .loader-109::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #FFF; width: 100%; height: 100%; overflow: hidden; -webkit-animation: animloader110 6s linear infinite; animation: animloader110 6s linear infinite; } .loader-110 { font-size: 48px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; letter-spacing: 2px; position: relative; } .loader-110::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #263238; text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF; width: 100%; height: 100%; overflow: hidden; -webkit-animation: animloader110 6s linear infinite; animation: animloader110 6s linear infinite; } .loader-111 { font-size: 48px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #263238; text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF; letter-spacing: 2px; position: relative; } .loader-111::after { content: "Loading"; position: absolute; left: 0; top: 0; color: #FFF; width: 100%; height: 100%; overflow: hidden; -webkit-animation: animloader111 6s linear infinite; animation: animloader111 6s linear infinite; } .loader-112 { font-size: 48px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; position: relative; } .loader-112::before { content: ""; position: absolute; left: 34px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 5px solid #FFF; border-bottom-color: #FF3D00; -webkit-animation: rotation 0.6s linear infinite; animation: rotation 0.6s linear infinite; } .loader-113 { color: #FFF; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 48px; letter-spacing: 4px; } .loader-113::before { content: ""; position: absolute; right: 70px; bottom: 10px; height: 28px; width: 5.15px; background: currentColor; -webkit-animation: animloader113L 1s linear infinite alternate; animation: animloader113L 1s linear infinite alternate; } .loader-113::after { content: ""; width: 10px; height: 10px; position: absolute; left: 125px; top: 2px; border-radius: 50%; background: red; -webkit-animation: animloader113 1s linear infinite alternate; animation: animloader113 1s linear infinite alternate; } .loader-114 { color: #FFF; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 48px; letter-spacing: 4px; } .loader-114::before { content: ""; position: absolute; right: 70px; bottom: 10px; height: 28px; width: 5.15px; background: currentColor; } .loader-114::after { content: ""; width: 8px; height: 8px; position: absolute; left: 125px; top: 2px; border-radius: 50%; background: red; -webkit-animation: animloader114 1s ease-in infinite; animation: animloader114 1s ease-in infinite; } .loader-115 { color: #FFF; position: relative; font-size: 48px; font-family: Arial, Helvetica, sans-serif; } .loader-115::after { content: ""; width: 5px; height: 5px; background: currentColor; position: absolute; bottom: 10px; right: -5px; -webkit-animation: animloader115 1s linear infinite; animation: animloader115 1s linear infinite; } .loa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0