diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss')
-rw-r--r-- | vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss new file mode 100644 index 00000000..d31dfed8 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss @@ -0,0 +1,87 @@ +.spinner { + height: 150px; + width: 150px; + margin: 0 auto; + -webkit-animation: rotation .6s infinite linear; + animation: rotation .6s infinite linear; + border: 6px solid rgba(0, 174, 239, 0.01); + border-radius: 100%; + position: absolute; + z-index: 1000; + left: 50%; + right: 50%; + top: 50%; + bottom: 50%; +} + + + +.spinner:before { + content: ""; + display: block; + position: absolute; + top: -6px; + height: 100%; + width: 100%; + border-top: 6px solid #009fdb; + border-left: 6px solid transparent; + border-bottom: 6px solid #c3161600; + border-right: 6px solid transparent; + border-radius: 100%; +} + +@-webkit-keyframes rotation { + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(359deg);} +} +@-moz-keyframes rotation { + from {-moz-transform: rotate(0deg);} + to {-moz-transform: rotate(359deg);} +} +@-o-keyframes rotation { + from {-o-transform: rotate(0deg);} + to {-o-transform: rotate(359deg);} +} +@keyframes rotation { + from {transform: rotate(0deg);} + to {transform: rotate(359deg);} +} + +.spinner-sm { + height:16px; + width:16px; +} + +.spinner-md { + height:40px; + width:40px; +} + +.spinner-lr { + height:150px; + width:150px; +} + +.spinner-red { + border:6px solid rgba(216, 27, 34, .15); +} + +.spinner-red:before { + border-top:6px solid rgba(216, 27, 34, 1); +} + +.spinner-green { + border:6px solid rgba(40, 183, 121, .15); +} + +.spinner-green:before { + border-top:6px solid rgba(40, 183, 121, 1); +} + +.spinner-grey { + border:6px solid rgba(139, 146, 154, .15); +} + +.spinner-grey:before { + border-top:6px solid rgba(139, 146, 154, 1); +} |