u-loading.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'"
  3. :style="[cricleStyle]">
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * loading 加载动画
  9. * @description 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
  10. * @tutorial https://www.uviewui.com/components/loading.html
  11. * @property {String} mode 模式选择,见官网说明(默认circle)
  12. * @property {String} color 动画活动区域的颜色,只对 mode = flower 模式有效(默认#c7c7c7)
  13. * @property {String Number} size 加载图标的大小,单位rpx(默认34)
  14. * @property {Boolean} show 是否显示动画(默认true)
  15. * @example <u-loading mode="circle"></u-loading>
  16. */
  17. export default {
  18. name: "u-loading",
  19. props: {
  20. // 动画的类型
  21. mode: {
  22. type: String,
  23. default: 'circle'
  24. },
  25. // 动画的颜色
  26. color: {
  27. type: String,
  28. default: '#c7c7c7'
  29. },
  30. // 加载图标的大小,单位rpx
  31. size: {
  32. type: [String, Number],
  33. default: '34'
  34. },
  35. // 是否显示动画
  36. show: {
  37. type: Boolean,
  38. default: true
  39. }
  40. },
  41. computed: {
  42. // 加载中圆圈动画的样式
  43. cricleStyle() {
  44. let style = {};
  45. style.width = this.size + 'rpx';
  46. style.height = this.size + 'rpx';
  47. if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
  48. return style;
  49. },
  50. }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. @import "../../libs/css/style.components.scss";
  55. .u-loading-circle {
  56. /* #ifndef APP-NVUE */
  57. display: inline-flex;
  58. /* #endif */
  59. vertical-align: middle;
  60. width: 28 rpx;
  61. height: 28 rpx;
  62. background: 0 0;
  63. border-radius: 50%;
  64. border: 2px solid;
  65. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
  66. animation: u-circle 1s linear infinite;
  67. }
  68. .u-loading-flower {
  69. width: 20px;
  70. height: 20px;
  71. display: inline-block;
  72. vertical-align: middle;
  73. -webkit-animation: a 1s steps(12) infinite;
  74. animation: u-flower 1s steps(12) infinite;
  75. background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  76. background-size: 100%;
  77. }
  78. @keyframes u-flower {
  79. 0% {
  80. -webkit-transform: rotate(0deg);
  81. transform: rotate(0deg);
  82. }
  83. to {
  84. -webkit-transform: rotate(1turn);
  85. transform: rotate(1turn);
  86. }
  87. }
  88. @-webkit-keyframes u-circle {
  89. 0% {
  90. transform: rotate(0);
  91. }
  92. 100% {
  93. transform: rotate(360deg);
  94. }
  95. }
  96. </style>