diff options
Diffstat (limited to 'openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css')
-rw-r--r-- | openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css | 382 |
1 files changed, 382 insertions, 0 deletions
diff --git a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css new file mode 100644 index 00000000..46e2a9aa --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css @@ -0,0 +1,382 @@ +/********************** + *CSS Animations by: + *http://codepen.io/vivinantony +***********************/ +.spinner1 { + width: 40px; + height: 40px; + position: relative; +} + + +.double-bounce1, .double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #fff; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: bounce 2.0s infinite ease-in-out; + animation: bounce 2.0s infinite ease-in-out; +} + +.double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner2 { + width: 40px; + height: 40px; + position: relative; +} + + +.container1 > div, .container2 > div, .container3 > div { + width: 6px; + height: 6px; + background-color: #fff; + + border-radius: 100%; + position: absolute; + -webkit-animation: bouncedelay 1.2s infinite ease-in-out; + animation: bouncedelay 1.2s infinite ease-in-out; + /* Prevent first frame from flickering when animation starts */ + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.spinner2 .spinner-container { + position: absolute; + width: 100%; + height: 100%; +} + +.container2 { + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); +} + +.container3 { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.circle1 { top: 0; left: 0; } +.circle2 { top: 0; right: 0; } +.circle3 { right: 0; bottom: 0; } +.circle4 { left: 0; bottom: 0; } + +.container2 .circle1 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.container3 .circle1 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.container1 .circle2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.container2 .circle2 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +.container3 .circle2 { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} + +.container1 .circle3 { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} + +.container2 .circle3 { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} + +.container3 .circle3 { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} + +.container1 .circle4 { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} + +.container2 .circle4 { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} + +.container3 .circle4 { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0.0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes bouncedelay { + 0%, 80%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 40% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner3 { + width: 40px; + height: 40px; + position: relative; + -webkit-animation: rotate 2.0s infinite linear; + animation: rotate 2.0s infinite linear; +} + +.dot1, .dot2 { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #fff; + border-radius: 100%; + + -webkit-animation: bounce 2.0s infinite ease-in-out; + animation: bounce 2.0s infinite ease-in-out; +} + +.dot2 { + top: auto; + bottom: 0px; + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} +@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} + +@-webkit-keyframes bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner4 { + width: 30px; + height: 30px; + background-color: #fff; + -webkit-animation: rotateplane 1.2s infinite ease-in-out; + animation: rotateplane 1.2s infinite ease-in-out; +} + +@-webkit-keyframes rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} + +.spinner5 { + width: 32px; + height: 32px; + position: relative; +} + +.cube1, .cube2 { + background-color: #fff; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: cubemove 1.8s infinite ease-in-out; + animation: cubemove 1.8s infinite ease-in-out; +} + +.cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +@-webkit-keyframes cubemove { + 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } + 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } + 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } + 100% { -webkit-transform: rotate(-360deg) } +} + +@keyframes cubemove { + 25% { + transform: translateX(42px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); + } 50% { + transform: translateX(42px) translateY(42px) rotate(-179deg); + -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); + } 50.1% { + transform: translateX(42px) translateY(42px) rotate(-180deg); + -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); + } 75% { + transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); + } 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} + +.spinner6 { + width: 50px; + height: 30px; + text-align: center; +} + +.spinner6 > div { + background-color: #fff; + height: 100%; + width: 6px; + margin-left:2px; + display: inline-block; + + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; +} + +.spinner6 .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner6 .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner6 .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner6 .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + .spinner7 { + width: 90px; + height: 30px; + text-align: center; + } + + .spinner7 > div { + background-color: #fff; + height: 15px; + width: 15px; + margin-left:3px; + border-radius: 50%; + display: inline-block; + + -webkit-animation: stretchdelay 0.7s infinite ease-in-out; + animation: stretchdelay 0.7s infinite ease-in-out; + } + + .spinner7 .circ2 { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; + } + + .spinner7 .circ3 { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; + } + + .spinner7 .circ4 { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; + } + + .spinner7 .circ5 { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; + } + + @-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: translateY(-10px) } + 20% { -webkit-transform: translateY(-20px) } + } + + @keyframes stretchdelay { + 0%, 40%, 100% { + transform: translateY(-10px); + -webkit-transform: translateY(-10px); + } 20% { + transform: translateY(-20px); + -webkit-transform: translateY(-20px); + } + }
\ No newline at end of file |