semi-circle-spin.css 532 B

123456789101112131415161718192021
  1. @keyframes spin-rotate {
  2. 0% {
  3. transform: rotate(0deg); }
  4. 50% {
  5. transform: rotate(180deg); }
  6. 100% {
  7. transform: rotate(360deg); } }
  8. .semi-circle-spin {
  9. position: relative;
  10. width: 35px;
  11. height: 35px;
  12. overflow: hidden; }
  13. .semi-circle-spin > div {
  14. position: absolute;
  15. border-width: 0px;
  16. border-radius: 100%;
  17. animation: spin-rotate 0.6s 0s infinite linear;
  18. background-image: linear-gradient(transparent 0%, transparent 70%, #55595c 30%, #55595c 100%);
  19. width: 100%;
  20. height: 100%; }