1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Loader Animation with CSS</title> <style type="text/css">h2{font-size: 33px;margin-bottom: 10px;}.loader { border-top: 16px solid #4285F4; border-right: 16px solid #EA4335; border-bottom: 16px solid #FBBC05; border-left: 16px solid #34A853; border-radius: 50%; width: 80px; height: 80px; -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;}@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}.loader-container { border: 1px solid rgba(255, 255, 255, 0.2); width: 240px; height: 240px; float: left; position: relative; overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box;}.loader2, .loader2:before, .loader2:after { background: #000000; -webkit-animation: animate 1s infinite ease-in-out; animation: animate 1s infinite ease-in-out; width: 1em; height: 4em;}.loader2 { color: #000000; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}.loader2:before, .loader2:after { position: absolute; top: 0; content: '';}.loader2:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}.loader2:after { left: 1.5em;}@-webkit-keyframes animate { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; }}@keyframes animate { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; }}</style></head><body><div class="container"> <div class="row"> <div class="col-lg-12"> <div class=""> <h2>Loader Style 1</h2> <div class="loader"></div> <h2 style="margin-bottom:0px;">Loader Style 2</h2> <div class="loader-container"> <div class="loader2"></div> </div> </div> </div> </div></div></body></html> |
