semi-circle-spin.css 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @-webkit-keyframes spin-rotate {
  2. 0% {
  3. -webkit-transform : rotate(0deg);
  4. transform : rotate(0deg);
  5. }
  6. 50% {
  7. -webkit-transform : rotate(-180deg);
  8. transform : rotate(-180deg);
  9. }
  10. 100% {
  11. -webkit-transform : rotate(-360deg);
  12. transform : rotate(-360deg);
  13. }
  14. }
  15. @-moz-keyframes spin-rotate {
  16. 0% {
  17. -moz-transform : rotate(0deg);
  18. transform : rotate(0deg);
  19. }
  20. 50% {
  21. -moz-transform : rotate(-180deg);
  22. transform : rotate(-180deg);
  23. }
  24. 100% {
  25. -moz-transform : rotate(-360deg);
  26. transform : rotate(-360deg);
  27. }
  28. }
  29. @-o-keyframes spin-rotate {
  30. 0% {
  31. -o-transform : rotate(0deg);
  32. transform : rotate(0deg);
  33. }
  34. 50% {
  35. -o-transform : rotate(-180deg);
  36. transform : rotate(-180deg);
  37. }
  38. 100% {
  39. -o-transform : rotate(-360deg);
  40. transform : rotate(-360deg);
  41. }
  42. }
  43. @keyframes spin-rotate {
  44. 0% {
  45. -webkit-transform : rotate(0deg);
  46. -moz-transform : rotate(0deg);
  47. -o-transform : rotate(0deg);
  48. transform : rotate(0deg);
  49. }
  50. 50% {
  51. -webkit-transform : rotate(-180deg);
  52. -moz-transform : rotate(-180deg);
  53. -o-transform : rotate(-180deg);
  54. transform : rotate(-180deg);
  55. }
  56. 100% {
  57. -webkit-transform : rotate(-360deg);
  58. -moz-transform : rotate(-360deg);
  59. -o-transform : rotate(-360deg);
  60. transform : rotate(-360deg);
  61. }
  62. }
  63. .semi-circle-spin {
  64. position : relative;
  65. width : 35px;
  66. height : 35px;
  67. overflow : hidden;
  68. }
  69. .semi-circle-spin > div {
  70. position : absolute;
  71. border-width : 0;
  72. border-radius : 100%;
  73. -webkit-animation : spin-rotate 0.6s 0s infinite linear;
  74. -moz-animation : spin-rotate 0.6s 0s infinite linear;
  75. -o-animation : spin-rotate 0.6s 0s infinite linear;
  76. animation : spin-rotate 0.6s 0s infinite linear;
  77. background-image : -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #55595C), to(#55595C));
  78. background-image : -webkit-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%);
  79. background-image : -moz-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%);
  80. background-image : -o-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%);
  81. background-image : linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%);
  82. width : 100%;
  83. height : 100%;
  84. }