Skip to content
This repository
Browse code

New loading spinner using CSS animation and a data URI

  • Loading branch information...
commit 65adba611ceac7cf303ce04130e9a01cb3965830 1 parent b399792
Devin Torres authored

Showing 1 changed file with 23 additions and 0 deletions. Show diff stats Hide diff stats

  1. +23 0 apps/fotofoo/resources/main_page.css
23 apps/fotofoo/resources/main_page.css
@@ -59,3 +59,26 @@
59 59 .footer .sc-button-label {
60 60 color: #666666;
61 61 }
  62 +
  63 +@-webkit-keyframes rotateSpinner {
  64 + from { -webkit-transform:rotate(0deg); }
  65 + to { -webkit-transform:rotate(360deg); }
  66 +}
  67 +
  68 +#loading {
  69 + position: absolute;
  70 + top: 50%;
  71 + left: 50%;
  72 + margin: -100px 0 0 -100px;
  73 + height: 200px;
  74 + width: 200px;
  75 + text-indent: 250px;
  76 + white-space: nowrap;
  77 + overflow: hidden;
  78 + background-color: #ccc;
  79 + -webkit-animation-name: rotateSpinner;
  80 + -webkit-animation-duration: 2s;
  81 + -webkit-animation-iteration-count: infinite;
  82 + -webkit-animation-timing-function: linear;
  83 + -webkit-mask-image: url(data:image/png;base64,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);
  84 +}

0 comments on commit 65adba6

Please sign in to comment.
Something went wrong with that request. Please try again.