You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-loading.vue 4.2 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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. display: inline-block;
  56. vertical-align: middle;
  57. width: 28rpx;
  58. height: 28rpx;
  59. background: 0 0;
  60. border-radius: 50%;
  61. border: 2px solid;
  62. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
  63. animation: u-circle 1s linear infinite;
  64. }
  65. .u-loading-flower {
  66. width: 20px;
  67. height: 20px;
  68. display: inline-block;
  69. vertical-align: middle;
  70. -webkit-animation: a 1s steps(12) infinite;
  71. animation: u-flower 1s steps(12) infinite;
  72. background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  73. background-size: 100%;
  74. }
  75. @keyframes u-flower {
  76. 0% {
  77. -webkit-transform: rotate(0deg);
  78. transform: rotate(0deg);
  79. }
  80. to {
  81. -webkit-transform: rotate(1turn);
  82. transform: rotate(1turn);
  83. }
  84. }
  85. @-webkit-keyframes u-circle {
  86. 0% {
  87. transform: rotate(0);
  88. }
  89. 100% {
  90. transform: rotate(360deg);
  91. }
  92. }
  93. </style>