Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CLOSED] Use rotateplane cursor as spinner #6596

Open
core-ai-bot opened this issue Aug 30, 2021 · 15 comments
Open

[CLOSED] Use rotateplane cursor as spinner #6596

core-ai-bot opened this issue Aug 30, 2021 · 15 comments

Comments

@core-ai-bot
Copy link
Member

Issue by MarcelGerber
Sunday Mar 23, 2014 at 22:45 GMT
Originally opened as adobe/brackets#7304

In this PR I took the bounce cursor from brackets.io and replaced the Brackets .spinner with 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

MarcelGerber included the following code: https://github.com/adobe/brackets/pull/7304/commits
@core-ai-bot
Copy link
Member Author

Comment by larz0
Monday Mar 24, 2014 at 23:44 GMT

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:

screen shot 2014-03-24 at 4 43 37 pm

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Mar 25, 2014 at 18:38 GMT

To be honest, I don't know what to write into :before and :after to get this.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Tuesday Mar 25, 2014 at 20:27 GMT

@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.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Mar 25, 2014 at 21:22 GMT

@TomMalbran I did these changes.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Thursday Mar 27, 2014 at 00:12 GMT

@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>

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Thursday Mar 27, 2014 at 18:10 GMT

Thanks, I updated it. The only bug I'm still experiencing is a white gap while the icon is rotating.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Thursday Mar 27, 2014 at 18:48 GMT

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>

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Thursday Mar 27, 2014 at 19:40 GMT

Commit pushed. It fixes the StatusBar cursor as well.
But there's still the issue with the gap. If you don't know what I mean, just take a look at the big cursor:
image

@core-ai-bot
Copy link
Member Author

Comment by larz0
Thursday Mar 27, 2014 at 20:44 GMT

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.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Thursday Mar 27, 2014 at 20:54 GMT

@SAPlayer if that doesn't work then try this one. I've made it bleed a bit: http://cl.ly/1e1r1L1U2i25

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Thursday Mar 27, 2014 at 21:22 GMT

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.
But the weird thing is that basically the same code is working in the browser, but not in Brackets. Maybe a problem with Chrome 29?

@core-ai-bot
Copy link
Member Author

Comment by larz0
Thursday Mar 27, 2014 at 21:30 GMT

UX review done.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Apr 01, 2014 at 16:45 GMT

@larz0 Are you waiting for anything to be done?

@core-ai-bot
Copy link
Member Author

Comment by larz0
Tuesday Apr 01, 2014 at 16:52 GMT

@bchintx will review this 👍

@core-ai-bot
Copy link
Member Author

Comment by bchintx
Wednesday Apr 02, 2014 at 06:32 GMT

Changes look great. Updated spinning cursor works fine on my Win 7 status bar in Brackets. Merging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@core-ai-bot