jquery.shCircleLoader.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /*!
  2. * SunHater Circle Loader v0.2 (2013-12-28)
  3. * jQuery plugin
  4. * Copyright (c) 2014 Pavel Tzonkov <sunhater@sunhater.com>
  5. * Dual licensed under the MIT and GPL licenses.
  6. * http://opensource.org/licenses/MIT
  7. * http://www.gnu.org/licenses/gpl.html
  8. *
  9. * External css example, when using externalCss:true option
  10. */
  11. /* Loader container */
  12. .shcl {
  13. position: relative;
  14. width: 100px;
  15. height: 100px;
  16. margin: 0 auto;
  17. }
  18. /* Progress status */
  19. .shcl > span {
  20. font-family: Verdana, Tahoma, Arial, sans-serif;
  21. font-size: 14px;
  22. color: black;
  23. }
  24. /* Loader dots */
  25. .shcl > div {
  26. position: absolute;
  27. visibility: hidden;
  28. width: 10px;
  29. height: 10px;
  30. background: transparent;
  31. box-shadow: 0 0 10px black;
  32. -webkit-border-radius: 5px;
  33. -webkit-animation-name: shcl_bounce;
  34. -webkit-animation-duration: 1s;
  35. -webkit-animation-iteration-count: infinite;
  36. -webkit-animation-direction: linear;
  37. -moz-border-radius: 5px;
  38. -moz-animation-name: shcl_bounce;
  39. -moz-animation-duration: 1s;
  40. -moz-animation-iteration-count: infinite;
  41. -moz-animation-direction: linear;
  42. -o-border-radius: 5px;
  43. -o-animation-name: shcl_bounce;
  44. -o-animation-duration: 1s;
  45. -o-animation-iteration-count: infinite;
  46. -o-animation-direction: linear;
  47. -ms-border-radius: 5px;
  48. -ms-animation-name: shcl_bounce;
  49. -ms-animation-duration: 1s;
  50. -ms-animation-iteration-count: infinite;
  51. -ms-animation-direction: linear;
  52. border-radius: 5px;
  53. animation-name: shcl_bounce;
  54. animation-duration: 1s;
  55. animation-iteration-count: infinite;
  56. animation-direction: linear;
  57. }
  58. /* Animation keyframes */
  59. @-webkit-keyframes shcl_bounce {
  60. 0% {-webkit-transform: scale(1);}
  61. 80% {-webkit-transform: scale(.3);}
  62. 100% {-webkit-transform: scale(1);}
  63. }
  64. @-moz-keyframes shcl_bounce {
  65. 0% {-moz-transform: scale(1);}
  66. 80% {-moz-transform: scale(.3);}
  67. 100% {-moz-transform: scale(1);}
  68. }
  69. @-o-keyframes shcl_bounce {
  70. 0% {-o-transform: scale(1);}
  71. 80% {-o-transform: scale(.3);}
  72. 100% {-o-transform: scale(1);}
  73. }
  74. @-ms-keyframes shcl_bounce {
  75. 0% {-ms-transform: scale(1);}
  76. 80% {-ms-transform: scale(.3);}
  77. 100% {-ms-transform: scale(1);}
  78. }
  79. @keyframes shcl_bounce {
  80. 0% {transform: scale(1);}
  81. 80% {transform: scale(.3);}
  82. 100% {transform: scale(1);}
  83. }