u-loading.vue 4.3 KB

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