semi-circle-spin.css 897 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes spin-rotate {
  5. 0% {
  6. transform: rotate(0deg);
  7. }
  8. 50% {
  9. transform: rotate(180deg);
  10. }
  11. 100% {
  12. transform: rotate(360deg);
  13. }
  14. }
  15. @keyframes spin-rotate {
  16. 0% {
  17. transform: rotate(0deg);
  18. }
  19. 50% {
  20. transform: rotate(180deg);
  21. }
  22. 100% {
  23. transform: rotate(360deg);
  24. }
  25. }
  26. .semi-circle-spin {
  27. position: relative;
  28. width: 35px;
  29. height: 35px;
  30. overflow: hidden;
  31. }
  32. .semi-circle-spin > div {
  33. position: absolute;
  34. border-width: 0px;
  35. border-radius: 100%;
  36. -webkit-animation: spin-rotate 0.6s 0s infinite linear;
  37. animation: spin-rotate 0.6s 0s infinite linear;
  38. background-image: linear-gradient(transparent 0%, transparent 70%, #b8c2cc 30%, #b8c2cc 100%);
  39. width: 100%;
  40. height: 100%;
  41. }