diff options
Diffstat (limited to 'public/src/app/loader/loader.component.scss')
-rw-r--r-- | public/src/app/loader/loader.component.scss | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/public/src/app/loader/loader.component.scss b/public/src/app/loader/loader.component.scss new file mode 100644 index 0000000..621adba --- /dev/null +++ b/public/src/app/loader/loader.component.scss @@ -0,0 +1,152 @@ +.tlv-loader-block { + background-color: #ffffff; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader { + height: 63px; + width: 63px; + position: absolute; + top: 50%; + left: 50%; +} + +.tlv-loader.small { + -webkit-transform: scale(0.26); + transform: scale(0.26); + margin-top: -36.5px; + margin-left: -36.5px; +} + +.tlv-loader.medium { + -webkit-transform: scale(0.5); + transform: scale(0.5); + margin-top: -26.5px; + margin-left: -26.5px; +} + +.tlv-loader.large { + -webkit-transform: scale(1); + transform: scale(1); + margin-top: -10.5px; + margin-left: -10.5px; +} + +.tlv-loader::before { + background-color: #eaeaea; + border-radius: 50%; + box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, + -21px 21px 0px 0px #eaeaea; + content: ''; + display: block; + height: 21px; + width: 21px; + position: absolute; + left: 50%; + margin-left: -10.5px; +} + +.tlv-loader::after { + border-radius: 50%; + content: ''; + display: block; + position: absolute; + height: 21px; + width: 21px; + -webkit-animation: dot-move 4.5s infinite ease-in; + animation: dot-move 4.5s infinite ease-in; +} + +@keyframes dot-move { + 0% { + background-color: #3bb2df; + left: 21px; + top: 0; + } + 6.25% { + background-color: #3bb2df; + left: 42px; + top: 21px; + } + 12.5% { + background-color: #3bb2df; + left: 21px; + top: 42px; + } + 18.75% { + background-color: #3bb2df; + left: 0; + top: 21px; + } + 25% { + background-color: #ffb81c; + left: 21px; + top: 0; + } + 31.25% { + background-color: #ffb81c; + left: 42px; + top: 21px; + } + 37.5% { + background-color: #ffb81c; + left: 21px; + top: 42px; + } + 43.75% { + background-color: #ffb81c; + left: 0; + top: 21px; + } + 50% { + background-color: #caa2dd; + left: 21px; + top: 0; + } + 56.25% { + background-color: #caa2dd; + left: 42px; + top: 21px; + } + 62.5% { + background-color: #caa2dd; + left: 21px; + top: 42px; + } + 68.75% { + background-color: #caa2dd; + left: 0; + top: 21px; + } + 75% { + background-color: #d9e51c; + left: 21px; + top: 0; + } + 81.25% { + background-color: #d9e51c; + left: 42px; + top: 21px; + } + 87.5% { + background-color: #d9e51c; + left: 21px; + top: 42px; + } + 93.75% { + background-color: #d9e51c; + left: 0; + top: 21px; + } + 100% { + background-color: #3bb2df; + left: 21px; + top: 0; + } +} |