Use rotateplane cursor as spinner #7304
Conversation
|
A new spinner would be great. Could we use the "flipping" one instead? (first spinner on http://tobiasahlin.com/spinkit/) We could probably use .spinner:before and .spinner:after to build a rectangular brackets that flips; like this: |
|
To be honest, I don't know what to write into :before and :after to get this. |
| 100% { background-position: -360px 0px; } | ||
| @-webkit-keyframes bounce { | ||
| 0%, 100% { -webkit-transform: scale(0.1) } | ||
| 50% { -webkit-transform: scale(1.0) } |
There was a problem hiding this comment.
- I think we should rename this keyframes to something more specific.
- It might be nice to move this keyframes closer to the
.spinnerclass, since there is the first time it is used. - You should also add the unprefixed version of the keyframes and the animation.
|
@SAplayer I should have time to take a look at this in two days. Would be nice if we can incorporate some Brackets branding in the spinner. |
|
@TomMalbran I did these changes. |
| } | ||
| } | ||
| // Retina versions |
There was a problem hiding this comment.
We don't need this any more, do we? (It was just for using a bigger image)
There was a problem hiding this comment.
Right, we shouldn't need it anymore.
|
@SAplayer I finally had time to give this a crack. Could you try this one? <html>
<head>
<title>Brackets Spinner</title>
<style>
.spinner {
box-sizing: border-box;
width: 60px;
height: 60px;
border-left: 15px solid #333;
border-right: 15px solid #333;
overflow: hidden;
position: relative;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
.spinner:before,
.spinner:after {
border-left: 11px solid #333;
border-right: 11px solid #333;
box-sizing: border-box;
content: "";
display: block;
position: absolute;
width: 100%;
height: 15px;
}
.spinner:before {
top: 0;
left: 0;
}
.spinner:after {
bottom: 0;
left: 0;
}
@-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);
}
}
</style>
</head>
<body>
<div class="spinner">
</div>
</body>
</html> |
|
Thanks, I updated it. The only bug I'm still experiencing is a white gap while the icon is rotating. |
|
Awesome. Could you replace #333 with #78B2F2? The large spinner works (see Extension Manager) but the small one you'll need to use these values: <html>
<head>
<title>Brackets Spinner</title>
<style>
.spinner {
box-sizing: border-box;
width: 14px;
height: 14px;
border-left: 3px solid #78B2F2;
border-right: 3px solid #78B2F2;
overflow: hidden;
position: relative;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
.spinner:before,
.spinner:after {
border-left: 3px solid #78B2F2;
border-right: 3px solid #78B2F2;
box-sizing: border-box;
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
}
.spinner:before {
top: 0;
left: 0;
}
.spinner:after {
bottom: 0;
left: 0;
}
@-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);
}
}
</style>
</head>
<body>
<div class="spinner">
</div>
</body>
</html> |
marcelgerber
changed the title
|
Commit pushed. It fixes the StatusBar cursor as well. |
|
Could you try replacing width: 100% for spinner:before and spinner:after with width 30px and 8px respectively? I'm not seeing that gap on the Mac. |
|
@SAplayer if that doesn't work then try this one. I've made it bleed a bit: http://cl.ly/1e1r1L1U2i25 |
|
Both don't work, but I don't think worth the effort fixing this. It's not noticeable unless you look specifically on the cursor. |
|
UX review done. |
|
@larz0 Are you waiting for anything to be done? |
|
@bchintx will review this 👍 |
|
Changes look great. Updated spinning cursor works fine on my Win 7 status bar in Brackets. Merging. |
Use rotateplane cursor as spinner
In this PR I took the bounce cursor from brackets.io and replaced the Brackets
.spinnerwith a modified version of this cursor.I think it suits better to such a modern UI, but it wouldn't be a problem to me to just use the current one furthermore.
@larz0 for UI review