Guest User

Untitled

a guest
Mar 22nd, 2018
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.39 KB | None | 0 0
  1. /**
  2. * recording animation
  3. */
  4.  
  5. @keyframes recording1 {
  6. 0%,
  7. 66% {
  8. border-color: transparent;
  9. }
  10. 100% {
  11. border-top-color: #000;
  12. border-bottom-color: #000;
  13. }
  14. }
  15.  
  16. @keyframes recording2 {
  17. 0%,
  18. 33% {
  19. border-color: transparent;
  20. }
  21. 66%,
  22. 100% {
  23. border-top-color: #000;
  24. border-bottom-color: #000;
  25. }
  26. }
  27.  
  28. @keyframes recording3 {
  29. 0% {
  30. border-color: transparent;
  31. }
  32. 33%,
  33. 100% {
  34. border-color: #000;
  35. }
  36. }
  37.  
  38. .recording {
  39. display: inline-block;
  40. position: relative;
  41. width: 50px;
  42. height: 50px;
  43. border: 2px solid #000;
  44. border-top-color: transparent;
  45. border-bottom-color: transparent;
  46. border-radius: 50%;
  47. animation-name: recording1;
  48. animation-duration: 3s;
  49. animation-iteration-count: infinite;
  50. animation-timing-function: linear;
  51. box-sizing: border-box;
  52. }
  53.  
  54. .recording::after,
  55. .recording::before {
  56. content: '';
  57. display: inline-block;
  58. position: absolute;
  59. top: 0;
  60. left: 0;
  61. bottom: 0;
  62. right: 0;
  63. margin: auto;
  64. box-sizing: border-box;
  65. border: 2px solid #000;
  66. border-top-color: transparent ;
  67. border-bottom-color: transparent;
  68. border-radius: 50%;
  69. animation-duration: 3s;
  70. animation-iteration-count: infinite;
  71. animation-timing-function: linear;
  72. }
  73.  
  74. .recording::before {
  75. width: 35px;
  76. height: 35px;
  77. animation-name: recording2;
  78. }
  79.  
  80. .recording::after {
  81. width: 25px;
  82. height: 25px;
  83. //animation-name: recording3;
  84. }
Add Comment
Please, Sign In to add comment