aboutsummaryrefslogtreecommitdiffstats
path: root/components/loader
diff options
context:
space:
mode:
Diffstat (limited to 'components/loader')
-rw-r--r--components/loader/_loader.scss255
-rw-r--r--components/loader/global-loader.html5
-rw-r--r--components/loader/loader.html5
3 files changed, 265 insertions, 0 deletions
diff --git a/components/loader/_loader.scss b/components/loader/_loader.scss
new file mode 100644
index 0000000..76d6cbb
--- /dev/null
+++ b/components/loader/_loader.scss
@@ -0,0 +1,255 @@
+.sdc-loader-background {
+ background-color: $black;
+ position: absolute;
+ top: 0px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ opacity: 0.5;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.sdc-loader-wrapper{
+ position: relative;
+ width: 100%;
+ height:100%;
+}
+
+.sdc-loader-wrapper-absolute { position: absolute; top: 0;}
+
+.sdc-loader {
+ z-index: 10002;
+}
+
+.sdc-loader-global-wrapper{
+ position:fixed;
+ width: 100%;
+ height:100%;
+}
+
+.loader-fixed {
+ display: block;
+ position:fixed;
+ top:0;
+ left:0;
+ width: 100%;
+ height:100%;
+}
+
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+.sdc-loader {
+ height: 63px;
+ width: 63px;
+ position: absolute;
+}
+
+.sdc-loader.small {
+ transform: scale(0.26);
+}
+
+.sdc-loader.medium {
+ transform: scale(0.5);
+}
+
+.sdc-loader.large {
+ transform: scale(1);
+}
+
+.sdc-loader::before {
+ background-color: $silver;
+ border-radius: 50%;
+ box-shadow: 21px 21px 0px 0px $silver, 0px 42px 0px 0px $silver, -21px 21px 0px 0px $silver;
+ content: '';
+ display: block;
+ height: 21px;
+ width: 21px;
+ position: absolute;
+ left: 50%;
+ margin-left: -10.5px;
+}
+
+.sdc-loader::after {
+ border-radius: 50%;
+ content: '';
+ display: block;
+ position: absolute;
+ height: 21px;
+ width: 21px;
+ animation: dot-move-2 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+ 0% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+ 25% {
+ background-color: $yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 75% {
+ background-color: $light-yellow;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+}
+
+@keyframes dot-move-2 {
+ 0% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+ 6.25% {
+ background-color: $light-blue;
+ left: 42px;
+ top: 21px;
+ }
+ 12.5% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 42px;
+ }
+ 18.75% {
+ background-color: $light-blue;
+ left: 0;
+ top: 21px;
+ }
+ 25% {
+ background-color: $yellow;
+ left: 21px;
+ top: 0;
+ }
+ 31.25% {
+ background-color: $yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 37.5% {
+ background-color: $yellow;
+ left: 21px;
+ top: 42px;
+ }
+ 43.75% {
+ background-color: $yellow;
+ left: 0;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 0;
+ }
+ 56.25% {
+ background-color: $light-purple;
+ left: 42px;
+ top: 21px;
+ }
+ 62.5% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 68.75% {
+ background-color: $light-purple;
+ left: 0;
+ top: 21px;
+ }
+ 75% {
+ background-color: $light-yellow;
+ left: 21px;
+ top: 0;
+ }
+ 81.25% {
+ background-color: $light-yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 87.5% {
+ background-color: $light-yellow;
+ left: 21px;
+ top: 42px;
+ }
+ 93.75% {
+ background-color: $light-yellow;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+}
diff --git a/components/loader/global-loader.html b/components/loader/global-loader.html
new file mode 100644
index 0000000..2a60b8b
--- /dev/null
+++ b/components/loader/global-loader.html
@@ -0,0 +1,5 @@
+<div>
+ <div class="sdc-loader-global-wrapper sdc-loader-background" >
+ <div class="sdc-loader large"></div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/loader/loader.html b/components/loader/loader.html
new file mode 100644
index 0000000..7ea3348
--- /dev/null
+++ b/components/loader/loader.html
@@ -0,0 +1,5 @@
+<div class = "sdc-loader-wrapper">
+ <div class="sdc-loader-background">
+ <div class="sdc-loader large"></div>
+ </div>
+</div> \ No newline at end of file