|
@@ -1,30 +1,31 @@
|
|
|
-.UppySpinner {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin: 100px auto;
|
|
|
+
|
|
|
+
|
|
|
+@keyframes spinner {
|
|
|
+ to {transform: rotate(360deg);}
|
|
|
}
|
|
|
|
|
|
-.UppySpinner.is-spinning {
|
|
|
- background-color: $color-pink;
|
|
|
- -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
- animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
+.UppySpinner {
|
|
|
+ min-width: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ margin: 25px auto;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-@-webkit-keyframes sk-rotateplane {
|
|
|
- 0% { -webkit-transform: perspective(120px) }
|
|
|
- 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
|
|
- 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
|
|
+.UppySpinner.is-spinning:before {
|
|
|
+ content: 'Loading…';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: -10px;
|
|
|
+ margin-left: -10px;
|
|
|
}
|
|
|
|
|
|
-@keyframes sk-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);
|
|
|
- }
|
|
|
+.UppySpinner.is-spinning:not(:required):before {
|
|
|
+ content: '';
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid rgba(0, 0, 0, .3);
|
|
|
+ border-top-color: rgba(0, 0, 0, .6);
|
|
|
+ animation: spinner .6s linear infinite;
|
|
|
}
|